otro - pasar parametros entre componentes angular 4

Llamar a una función en un componente Angular2 hijo?

Question

Tengo un componente que actúa como una barra de búsqueda. Puede hacer solicitudes de API y proporcionar los resultados al resto de la aplicación a través de @Output y EventEmitter pero también quiero que una función vaya 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 padre borre el historial. Lo mejor que puedo pensar es llamar de alguna manera a un método en mi barra de búsqueda desde un componente principal.

Lo mejor que he logrado (pero no he podido implementar correctamente) es intentar pasar un EventEmitter INTO a mi barra de búsqueda y el niño se suscribe a los eventos de los padres. El @Input no ha completado el enlace en el momento en que el constructor lo hizo, 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 se ajusta a la separación de preocupaciones, por lo que parece mejor mantener el historial en el componente de la barra de búsqueda.

¿Cómo puede un componente principal llamar a una función en un componente secundario?

Answer 1

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 originalmente pensé que era. Imagino que tengo acceso a todos los campos y funciones públicos.

Answer 2

@ViewChild aprovechar el decorador @ViewChild para hacer referencia al componente secundario desde el principal por 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 observar que el decorador de parámetros @Query también se puede usar:

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

  (...)
}

Espero que te ayude, Thierry