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

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

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

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

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

Ответ 1

Вам нужно использовать декоратор @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();
  }
}

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

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

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

  (...)
}

Надеюсь, это поможет вам, Thierry

Ответ 2

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

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

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