Angular 2 - 調用組件

Question

我正在開發一個ANgular 2應用程序。

我有一個小的窗體，其中home.component.ts，它看起來像下面。

一旦用戶點擊提交按鈕。數據表應該加載匹配的結果。如下所示。這是一個不同的組件result.component.ts

什麼叫從home.component的result.component最好的方法？ 第一個組件應該將結果數據集傳遞給第二個組件。

Answer 1

您可以顯示其選擇器在@Component指令定義的結果，並通過@input結果傳遞：

result.component.ts

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

家。 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>