javascript - eventemitter angular 5 example

El niño escucha el evento principal en Angular 2

Question

En los documentos angulares hay un tema sobre cómo escuchar los eventos infantiles 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 para guardar cosas después del cambio, el usuario hace clic en el botón Guardar en la barra de tareas (que se encuentra en admin.component) y el componente secundario debe escuchar ese evento de clic para guardar el personal.

Answer 1

Creo que este documento podría ser útil para usted:

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

De hecho, podría aprovechar un tema observable / 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 simplemente puede suscribirse en 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 dicho tema de manera similar ...

Answer 2

En aras de la posteridad, pensé en mencionar la solución más convencional para 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();
  }
}

Answer 3

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

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

En el componente padre

<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 hijo. A partir de ahí, el componente secundario 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.