Вызов функции в дочернем компоненте Angular2?

Question

У меня есть компонент, который действует как панель поиска. Он может делать запросы API и предоставлять результаты остальной части приложения через @Output а также EventEmitter но я также хочу, чтобы функция пошла другим путем. Компонент панели поиска хранит историю своих поисков, и я бы хотел, чтобы родительский компонент мог очистить историю. Лучшее, что я могу придумать, это как-то вызвать метод в моей панели поиска из родительского компонента.

Лучшее, что я придумал (но не смог правильно реализовать), это попытаться передать EventEmitter В мою панель поиска и ребенок подписывается на события родителей. @Input к тому времени конструктор не завершил связывание, поэтому на самом деле сложно сделать это.

Я полагаю, что я мог бы попытаться сохранить историю в родительском компоненте, но причина, по которой панель поиска является компонентом, заключается в том, что она будет отображаться в нескольких местах, и это не соответствует разделению интересов, поэтому лучше сохранять историю в компонент панели поиска.

Как родительский компонент может вызвать функцию дочернего компонента?

Answer 1

Оказывается, я могу поместить локальную переменную в компонент и получить доступ к его общедоступным функциям. То есть:

<search-bar #SearchBar ...></search-bar>
<button (click)='SearchBar.ClearHistory()' ...></button>

Очевидно, локальная переменная связывается с Компонентом, а не с DOM, как я изначально думал. Я представляю, что у меня есть доступ ко всем публичным полям и функциям.

Answer 2

Вы должны использовать @ViewChild декоратор для ссылки на дочерний компонент от родительского путем инъекции:

import { Component, ViewChild } from 'angular2/core';  

(...)

@Component({
  selector: 'my-app',
  template: `
    <h1>My First Angular 2 App</h1>
    <child></child>
    <button (click)="submit()">Submit</button>
  `,
  directives:[App]
})
export class AppComponent { 
  @ViewChild(SearchBar) searchBar:SearchBar;

  (...)

  someOtherMethod() {
    this.searchBar.someMethod();
  }
}

Вот обновленный план: http://plnkr.co/edit/mrVK2j3hJQ04n8vlXLXt?p=preview.

Вы можете заметить, что @Query Параметр декоратор также может быть использован:

export class AppComponent { 
  constructor(@Query(SearchBar) children:QueryList<SearchBar>) {
    this.childcmp = children.first();
  }

  (...)
}

Надеюсь, это поможет тебе, Тьерри