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>