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？

Answer 1

对同一事件使用output事件绑定

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

Answer 2

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

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

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

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

searchQuery:string = ''

在搜索组件中，使用生命周期挂钩ngOnChanges来检测输入属性的更改，或者可以使用属性设置器。在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

Answer 3

header.component.ts

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

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

在这里您可以如何在父级中调用子方法，但是我建议您重构您的组件，将SearchResultCardComponent组件设置为虚拟，仅接收来自父级的搜索结果。

Answer 4

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

在您的HeaderComponent.ts中，

constructor(private searchResultCardComponent: SearchResultCardComponent){}

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

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

4 个答案: