El niño escucha el evento principal en Angular 2

En los documentos angulares hay un tema sobre la escucha de eventos secundarios de los padres. Esta bien. ¡Pero mi propósito es algo inverso !. En mi aplicación hay un 'admin.component' que contiene la vista de diseño de la página de administración (menú de la barra lateral, barra de tareas, estado, etc.). En este componente principal configuré el sistema de enrutador para cambiar la vista principal entre otras páginas del administrador. El problema es guardar cosas después del cambio, el usuario hace clic en el botón Guardar en la barra de tareas (que se coloca en admin.component) y el componente secundario debe escuchar ese evento de clic para guardar personal.

Creo que este documento podría serle útil:

• https://angular.io/docs/ts/latest/cookbook/component-communication.html

De hecho, podría aprovechar un observable / sujeto que el padre proporciona a sus hijos. Algo como eso:

@Component({
  (...)
  template: `
    <child [parentSubject]="parentSubject"></child>
  `,
  directives: [ ChildComponent ]
})
export class ParentComponent {
  parentSubject:Subject<any> = new Subject();

  notifyChildren() {
    this.parentSubject.next('some value');
  }
}

El componente hijo puede simplemente suscribirse a este tema:

@Component({
  (...)
})
export class ChildComponent {
  @Input()
  parentSubject:Subject<any>;

  ngOnInit() {
    this.parentSubject.subscribe(event => {
      // called when the notifyChildren method is
      // called in the parent component
    });
  }

  ngOnDestroy() {
    // needed if child gets re-created (eg on some model changes)
    // note that subsequent subscriptions on the same subject will fail
    // so the parent has to re-create parentSubject on changes
    this.parentSubject.unsubscribe();
  }

}

De lo contrario, podría aprovechar un servicio compartido que contenga un tema de este tipo de manera similar ...

Por el bien de la posteridad, pensé en mencionar la solución más convencional a esto : simplemente obtenga una referencia a ViewChild y luego llame a uno de sus métodos directamente.

@Component({
  selector: 'app-child'
})
export class ChildComponent {

  notifyMe() {
    console.log('Event Fired');
  }
}

@Component({
  selector: 'app-parent',
  template: `<app-child #child></app-child>`
})
export class ParentComponent {

  @ViewChild('child')
  private child: ChildComponent;

  ngOnInit() {
    this.child.notifyMe();
  }
}

Un enfoque más básico podría ser posible aquí si entiendo la pregunta correctamente. Supuestos -

• OP tiene un botón de guardar en el componente principal
• Los datos que deben guardarse están en los componentes secundarios
• Se puede acceder a todos los demás datos que el componente secundario pueda necesitar desde services

En el componente principal

<button type="button" (click)="prop1=!prop1">Save Button</button>
<app-child-component [setProp]='prop1'></app-child-component>

Y en el niño ...

prop1:boolean;
  @Input()
  set setProp(p: boolean) {
    // -- perform save function here
}

Esto simplemente envía el clic del botón al componente secundario. Desde allí, el componente hijo puede guardar los datos de forma independiente.

EDITAR: si los datos de la plantilla principal también deben pasarse junto con el clic del botón, eso también es posible con este enfoque. Avíseme si ese es el caso y actualizaré los ejemplos de código.

Para aquellos que estan recibiendo Cannot read property 'notifyMe' of undefined

Intente llamar al método dentro en ngAfterViewInit()lugar dengOnInit()