Comment émettre un événement de parent à enfant?

J'utilise actuellement Angular 2. Habituellement, nous utilisons @Output() addTab = new EventEmitter<any>();puis addTab.emit()pour émettre un événement au composant parent.

Y a-t-il moyen de le faire vice cersa, du parent à l'enfant?

En utilisant RxJs , vous pouvez déclarer un Subjectdans votre composant parent et le passer en tant que Observablecomposant enfant, le composant enfant doit simplement s'y abonner Observable.

Parent-composant

eventsSubject: Subject<void> = new Subject<void>();

emitEventToChild() {
  this.eventsSubject.next();
}

Parent-HTML

<child [events]="eventsSubject.asObservable()"> </child>    

Composant enfant

private eventsSubscription: Subscription;

@Input() events: Observable<void>;

ngOnInit(){
  this.eventsSubscription = this.events.subscribe(() => doSomething());
}

ngOnDestroy() {
  this.eventsSubscription.unsubscribe();
}

Autant que je sache, il existe 2 façons standard de le faire.

1. @Input

Chaque fois que les données du parent changent, l'enfant en est informé dans la méthode ngOnChanges. L'enfant peut agir en conséquence. C'est la manière standard d'interagir avec un enfant.

Parent-Component
public inputToChild: Object;

Parent-HTML
<child [data]="inputToChild"> </child>       

Child-Component: @Input() data;

ngOnChanges(changes: { [property: string]: SimpleChange }){
   // Extract changes to the input property by its name
   let change: SimpleChange = changes['data']; 
// Whenever the data in the parent changes, this method gets triggered. You 
// can act on the changes here. You will have both the previous value and the 
// current value here.
}

2. Concept de service partagé

Créer un service et utiliser une observable dans le service partagé. L'enfant y souscrit et chaque fois qu'il y a un changement, l'enfant sera averti. C'est également une méthode populaire. Lorsque vous souhaitez envoyer autre chose que les données que vous passez en entrée, cela peut être utilisé.

SharedService
subject: Subject<Object>;

Parent-Component
constructor(sharedService: SharedService)
this.sharedService.subject.next(data);

Child-Component
constructor(sharedService: SharedService)
this.sharedService.subject.subscribe((data)=>{

// Whenever the parent emits using the next method, you can receive the data 
in here and act on it.})

Dans un composant parent, vous pouvez utiliser @ViewChild () pour accéder à la méthode / variable du composant enfant.

@Component({
  selector: 'app-number-parent',
  templateUrl: './number-parent.component.html'
})
export class NumberParentComponent {
    @ViewChild(NumberComponent)
    private numberComponent: NumberComponent;
    increase() {
       this.numberComponent.increaseByOne();
    }
    decrease() {
       this.numberComponent.decreaseByOne();
    }
} 

Mettre à jour:

Angulaire à partir de 8 -

@ViewChild(NumberComponent, { static: false })

Utilisez le décorateur @Input () dans votre composant enfant pour permettre au parent de se lier à cette entrée.

Dans le composant enfant, vous le déclarez tel quel:

@Input() myInputName: myType

Pour lier une propriété du parent à un enfant, vous devez ajouter dans votre modèle les crochets de liaison et le nom de votre entrée entre eux.

Exemple :

<my-child-component [myChildInputName]="myParentVar"></my-child-component>

Mais attention, les objets sont passés comme référence, donc si l'objet est mis à jour dans l'enfant, la var du parent sera trop mise à jour. Cela peut parfois conduire à un comportement indésirable. Avec les types principaux, la valeur est copiée.

Pour aller plus loin, lisez ceci:

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

Dans le parent, vous pouvez référencer l'enfant en utilisant @ViewChild. Si nécessaire (c'est-à-dire lorsque l'événement serait déclenché), vous pouvez simplement exécuter une méthode dans l'enfant depuis le parent en utilisant la référence @ViewChild.