Angular 2 - Aufruf einer Komponente

Ich entwickle eine ANgular 2 Anwendung.Angular 2 - Aufruf einer Komponente

Ich habe ein kleines Formular in home.component.ts, die wie folgt aussieht.

Sobald der Benutzer auf Senden klicken. Datatable sollte mit den übereinstimmenden Ergebnissen geladen werden. Wie unten. Dies ist eine andere Komponente result.component.ts

Was ist der beste Ansatz, um die result.component vom home.component anrufen? Die erste Komponente sollte den resultierenden Datensatz an den zweiten übergeben.

Quelle

2017-05-26 Chathuranga Ranasinghe

https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent- to-child – echonax

Ich werde das durchgehen. Danke @echonax –

Ist die Datentabelle in der gleichen Komponente wie 'home.component'? Wie lädt das Datatable die neuen Ergebnisse? Werden alle Daten geladen und gefiltert? Oder ruft es einen "http" -Aufruf zum Server auf und holt neue Ergebnisse? – CozyAzure

Sie könnten das Ergebnis durch seine Wähler zeigen, die in der @Component Richtlinie und geben Sie das Ergebnis über eine @Input definiert:

result.component.ts

@Component({ 
    selector: 'search-result', 
    teplateUrl: './result.component.html' 
}) 
export class ResultComponent { 
    @Input() result: Result; 
}

nach Hause. component.ts

export class HomeComponent { 
    searchString: string; 
    result: Result; 

    performSearch(searchString: string) { 
    // perform API call here and save result to this.result 
    } 
}

home.componen t.html

<label for="q"><strong>Territory:</strong></label><br> 
<input type="text" name="q" ([ngModel])="searchString"><br> 
<button (click)="performSearch(searchString)">Search</button> 
Result: 
<search-result result="result"></search-result>

result.component.html

<table> 
    <tr *ngFor="let item of result"> 
    <td>{{ item }} 
    </tr> 
</table>

Quelle

2017-05-26 08:25:34

Angular 2 - Aufruf einer Komponente

Antwort

Verwandte Themen