вызвать функцию другого компонента по событию в одном компоненте в 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 в поле ввода?

Answer 1

используйте привязку в вашей форме, используя директиву ngModel

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

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

В компоненте заголовка сделайте searchQuery как пустую строку

searchQuery:string = ''

В компоненте поиска используйте ловушку жизненного цикла ngOnChanges, чтобы обнаружить свойство вводаизменения или вы можете использовать propety 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;
  }
}

демо Ссылка

Answer 2

header.component.ts

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

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

здесь вы можете вызвать дочерний метод в parent, но я советую вам реорганизовать компонент, сделать компонент SearchResultCardComponent пустым, получить только результаты поиска от parent.

Answer 3

Введите 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);
}

Answer 4

Использовать output привязку события для того же

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