子供の中で関数を呼び出すAngular2コンポーネント？

Question

私は検索バーとして機能するコンポーネントを持っています。それは、アプリの残りの部分には、@OutputとEventEmitterを介して、APIの要求を行い、結果を提供することができますが、私はまた、逆の機能をしたい。検索バーコンポーネントは検索履歴を保持しており、親コンポーネントが履歴を消去する方法を提供したいと考えています。私が考えることができる最高の方法は、何らかの形で、親コンポーネントからの検索バーのメソッドを呼び出すことです。

私が思いついたことは、EventEmitterを検索バーに入れようとすることです。子供は親のイベントに登録します。 @Inputはコンストラクタの時間までにバインディングを完了していないので、実際にこれを行うのは難しいです。

親コンポーネントに履歴を保存しようと思うかもしれませんが、検索バーが複数の場所に表示され、これが分離の懸念に適合しないため、検索バーがコンポーネントである理由は、検索バーコンポーネントに履歴を保存します。

親コンポーネントは子コンポーネントの関数をどのように呼び出すことができますか？

Answer 1

私は、コンポーネントにローカル変数を置くことができ、そのpublic関数にアクセスすることができます。私は：

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

ローカル変数は、もともと私が思ったように、ComponentではなくDOMにバインドされているようです。私はすべての公共の分野と機能にアクセスできると思います。

Answer 2

あなたは、注射によって、親1から子コンポーネントを参照するために@ViewChildデコレータを活用する必要があります：http://plnkr.co/edit/mrVK2j3hJQ04n8vlXLXt?p=preview：ここ

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です。

あなたは@Queryパラメータデコレータを使用することもできることに気づくことができます。

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

    (...) 
} 

が、それはあなたのお役に立てば幸い、 ティエリー