Javascript 角度2-调用组件

我正在开发一个ANgular 2应用程序

我有一个小表单，它位于home.component.ts中，如下所示

一旦用户点击提交按钮。应使用匹配结果加载Datatable。如下图所示。这是一个不同的组件结果。component.ts

从home.component调用result.component的最佳方法是什么？

---

第一个组件应将结果数据集传递给第二个组件。

您可以通过@component指令中定义的选择器显示结果，并通过@Input传递结果：

结果.组件.ts

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

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

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

home.component.ts

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

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>

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

地区：



搜寻
结果:

result.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>

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

{{item}}

我会仔细检查一下。感谢@echonaxIs将数据表放在与

home.component相同的组件中？Datatable如何加载新结果？是否所有数据都已加载并过滤？或者它将调用对服务器的
http
调用并获取新结果？是的。从同一数据库获取数据。一旦用户单击submit按钮，就会有一个服务器调用，使用web API按照给定的选择标准加载数据。