在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>

在 Header 组件中将 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屋！