Angular 6中一个组件中事件发生时其他组件的调用函数 [英] call function of other component on event in one component in Angular 6

问题描述

我正在使用Angular 6.

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

I have a component HeaderComponent whose html contain an input field like

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?

How can I call the function performSearch on the change in searchQuery value on keyup in the input field?

推荐答案

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

use binding in your form using ngModel directive

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

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

在页眉组件中，将searchQuery作为空字符串

In Header Component make searchQuery as empty string

searchQuery:string = ''

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

In your search component use lifecycle hook ngOnChanges to detect the input property changes or you can use propety setter. In ngOnChanges life cycle you will get searchQuery property value. In there you can perform search function

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

演示链接

这篇关于Angular 6中一个组件中事件发生时其他组件的调用函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！