angular - Angular 6中一个组件中的事件调用其他组件的函数

Question

我正在使用Angular 6.

我有一个组件HeaderComponent，其 html 包含一个输入字段，例如

header.component.html

<form>
    <input (keyup)="search($event)">
</form>

<app-search-result-card *ngIf="searchQuery.length > 3"
                          [searchQuery]="searchQuery">
</app-search-result-card>

SearchResultComponent具有执行搜索的功能

export class SearchResultCardComponent implements OnInit {

  @Input() searchQuery: string;
  searching = true;

  constructor(
    private searchService: SearchService
  ) { }

  ngOnInit() {
    this.performSearch();
  }

  /**
   * Perform search
   */
  performSearch() {
    this.searching = true;
    console.log(this.searchQuery);
    this.searching = false;
  }
}

如何在输入字段performSearch中调用更改searchQuery值的函数？keyup

标签： angularinputangular6keyup

Answer 1

使用output相同的事件绑定

<app-search-result-card *ngIf="searchQuery.length > 3"
                          [searchQuery]="searchQuery"
                          (queryResult)='queryResult($event)'>
</app-search-result-card>