Eine Funktion in einem Kind Angular2-Komponente aufrufen?

Question

Ich habe eine Komponente, die als Suchleiste fungiert. Es kann API-Anfragen stellen und die Ergebnisse über eine @Output und EventEmitter dem Rest der App zur Verfügung stellen, aber ich möchte auch, dass eine Funktion in die andere Richtung geht. Die Suchleisten-Komponente behält einen Verlauf der Suchvorgänge bei und ich möchte der übergeordneten Komponente einen Weg bieten, den Verlauf zu löschen. Das Beste, was mir einfällt, ist, eine Methode in meiner Suchleiste von einer übergeordneten Komponente aus aufzurufen.

Das Beste, was ich mir ausgedacht habe (aber nicht richtig umsetzen konnte), ist zu versuchen, eine EventEmitter IN meine Suchleiste zu übergeben, und das Kind abonniert die Ereignisse der Eltern. Die @Input hat die Bindung zum Zeitpunkt des Konstruktors noch nicht abgeschlossen, daher wird es schwierig, dies tatsächlich zu tun.

Ich denke, ich könnte versuchen, die Geschichte in der Elternkomponente zu speichern, aber der Grund, warum die Suchleiste eine Komponente ist, ist, weil es an mehreren Orten erscheint und dies nicht mit Trennung von Bedenken passt, so scheint es am besten zu sein Behalten Sie den Verlauf in der Suchleisten-Komponente bei.

Wie kann eine übergeordnete Komponente eine Funktion für eine untergeordnete Komponente aufrufen?

Answer 1

Es stellt sich heraus, ich kann eine lokale Variable auf die Komponente setzen und haben Zugriff auf ihre öffentlichen Funktionen. Beispiel:

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

Anscheinend bindet die lokale Variable an die Komponente und nicht an das DOM, wie ich ursprünglich dachte. Ich stelle mir vor, dass ich Zugang zu allen öffentlichen Feldern und Funktionen habe.

Answer 2

Sie benötigen die @ViewChild Dekorateur zu nutzen, die untergeordnete Komponente von der Mutter eine durch Injektion zu verweisen:

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(); 
    } 
} 

Hier die aktualisierte plunkr ist: http://plnkr.co/edit/mrVK2j3hJQ04n8vlXLXt?p=preview.

können Sie feststellen, dass der @Query Parameter Dekorateur auch verwendet werden könnten:

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

    (...) 
} 

Hoffe, dass es Ihnen hilft, Thierry