web-dev-qa-db-fra.com

Angular 2 événements de passage au composant enfant de second niveau

Dans mon application angulaire 2 ngrx, j'ai une structure avec des éléments imbriqués:

parentContainer.ts
@Component({
  template: `<parent-component
    (onEvent)="onEvent($event)"
  ></parent-component>`,
})

class ParentContainer {
  constructor(private store: Store<IState>) { }

  private onEvent = (payload: IEventPayload) {
    this.store.dispatch(new EventAction(payload));
  }
}

parentComponent.ts
@Component({
  selector: 'parent-component',
  templateUrl: 'patent.html',
})

class ParentComponent {
  @Output() private onEvent = new EventEmitter<IEventPayload>();
}

patent.html
<div>
  ...some content

  <child-component></child-component>
</div>

Dans ce cas, je peux émettre un événement à partir du composant parent, mais je dois le faire à partir du composant enfant. Y a-t-il moyen de passer événement du composant parent au composant enfant, puis d'utiliser quelque chose comme ceci: this.onEvent.emit({... some payload})? 

javascriptangularngrx
7
qwe asd

Dans votre patent.html, vous pouvez laisser le composant enfant émettre directement via onEvent comme ceci:

<child-component (onChildEvent)="onEvent.emit($event)">
</child-component>
8
amu

En composant enfant: 

import { Component, OnInit, EventEmitter, Output } from '@angular/core';

... dans le corps de la classe:

@Output() onMyEvent = new EventEmitter<boolean>();

... événement d'appel 

this.onMyEvent.emit(true);

Dans le modèle: 

<child-component (onChildEvent)="onEvent.emit($event)">
</child-component>

En composant parent: 

  onChildEvent(boolean){
    alert("Event now!");
  }
2
mpz