Tengo un componente que actúa como una barra de búsqueda. Puede realizar solicitudes de API y proporcionar los resultados al resto de la aplicación a través de @Output y EventEmitter , pero también quiero una función para el otro lado. El componente de la barra de búsqueda mantiene un historial de sus búsquedas y me gustaría proporcionar una forma para que el componente principal borre el historial. Lo mejor que se me ocurre es llamar de alguna manera a un método en mi barra de búsqueda desde un componente principal.
Lo mejor que se me ocurrió (pero no he podido implementar correctamente) es tratar de pasar un EventEmitter mi barra de búsqueda y el niño se suscribe a los eventos de los padres. Sin embargo, @Input no ha completado el enlace en el momento en que el constructor lo hace, por lo que se vuelve complicado hacer esto.
Supongo que podría intentar almacenar el historial en el componente principal, pero la razón por la que la Barra de búsqueda es un componente es porque aparecerá en varios lugares y esto no encaja con la Separación de preocupaciones, por lo que parece mejor mantener el historial en el componente Barra de búsqueda.
¿Cómo puede un componente principal llamar a una función en un componente secundario?
Resulta que puedo poner una variable local en el componente y tener acceso a sus funciones públicas. Es decir:
<search-bar #SearchBar ...></search-bar> <button (click)='SearchBar.ClearHistory()' ...></button>Aparentemente, la variable local se une al Componente y no al DOM como pensé originalmente. Me imagino que tengo acceso a todos los campos y funciones públicas.
Debe aprovechar el decorador @ViewChild para hacer referencia al componente secundario del principal mediante inyección:
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(); } }Aquí está el plunkr actualizado: http://plnkr.co/edit/mrVK2j3hJQ04n8vlXLXt?p=preview .
Puede notar que el decorador de parámetros @Query también podría usarse:
export class AppComponent { constructor(@Query(SearchBar) children:QueryList<SearchBar>) { this.childcmp = children.first(); } (...) }Espero que te ayude Thierry