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

Question

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

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

Answer 1

Utilisation de RxJs vous pouvez déclarer un Subject dans votre composant parent et le passer comme Observable au composant enfant, ce dernier n'a qu'à s'abonner à ce code. Observable .

Parent-Composant

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

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

Parent-HTML

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

Composante enfant

private eventsSubscription: Subscription;

@Input() events: Observable<void>;

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

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

Answer 2

Pour autant que je sache, il y a deux façons standard de le faire.

1. @Input

Chaque fois que les données du parent sont modifiées, l'enfant en est informé par le biais de la méthode ngOnChanges. L'enfant peut agir en conséquence. Il s'agit de 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 un observable dans le service partagé. L'enfant s'y abonne et chaque fois qu'il y a un changement, l'enfant sera notifié. C'est également une méthode populaire. Lorsque vous voulez envoyer quelque chose d'autre que les données que vous passez en entrée, vous pouvez l'utiliser.

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.})

Answer 3

Dans un composant parent, vous pouvez utiliser @ViewChild() pour accéder aux méthodes/variables 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();
    }
} 

Mise à jour :

Angular 8 et plus -

@ViewChild(NumberComponent, { static: false })

Answer 4

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é d'un 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 une référence, donc si l'objet est mis à jour dans l'enfant, la var du parent sera également mise à jour. Cela peut entraîner un comportement indésirable dans certains cas. Avec les types primaires, la valeur est copiée.

Pour aller plus loin, lisez ceci :

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

Answer 5

Dans le parent, vous pouvez faire référence à l'enfant en utilisant @ViewChild. En cas de besoin (c'est-à-dire lorsque l'événement est déclenché), vous pouvez simplement exécuter une méthode dans l'enfant à partir du parent en utilisant la référence @ViewChild.