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;
}

<强> home.component.ts

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

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

<强> home.component.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>