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

如何在输入字段中 keyup 上的 searchQuery 值发生变化时调用函数 performSearch？

Answer 1

使用 output 相同的事件绑定

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

Answer 2

header.component.ts

// use ViewChild to get instance of SearchResultCardComponent in template
@ViewChild(SearchResultCardComponent) src: SearchResultCardComponent;

search(event) {
  this.src.performSearch();
}

这里介绍了如何在父级中调用子方法，但我建议您重构组件，使 SearchResultCardComponent 组件成为虚拟组件，仅从父级接收搜索结果。

Answer 3

将SearchResultCardComponent注入HeaderComponent并在searchKey.length > 3时调用其函数performSearch()，如下所示：

在你的HeaderComponent.ts,

constructor(private searchResultCardComponent: SearchResultCardComponent){}

search(searchKey: string) {
    if(searchKey.length <= 3) return;
    let searchResult = this.searchResultCardComponent.performSearch(searchKey);
}

Answer 4

使用 ngModel 指令在您的表单中使用绑定

<form>
    <input type="text" [(ngModel)]="searchQuery" name="searchQuery">
</form>

<search [searchQuery]="searchQuery"></search>

在Header组件中将searchQuery设为空字符串

searchQuery:string = ''

在您的搜索组件中，使用生命周期挂钩 ngOnChanges 来检测输入属性更改，或者您可以使用属性 setter。在 ngOnChanges 生命周期中，您将获得 searchQuery 属性值。在那里你可以执行搜索功能

export class SearchComponent implements OnChanges  {
  searching: boolean
  @Input() searchQuery: string;


  ngOnChanges(changes:SimpleChanges){
    if(changes.searchQuery.currentValue.length > 3){
      this.performSearch()
    }
  }

   performSearch() {
    this.searching = true;
    console.log(this.searchQuery);
    this.searching = false;
  }
}

演示Link

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

call function of other component on event in one component in Angular 6

input

keyup

angular

angular6