Comment émettre un événement angulaire du parent à l'enfant?

Je suis actuellement en utilisant angular2. Habituellement, nous utilisons @Output() addTab = new EventEmitter(); puis addTab.emit() pour émettre un événement de composant parent. Est-il de toute façon nous n'vice-cersa, de parent à enfant.

Il suffit de changer la valeur d'une expression transmis en Entrée pour le composant enfant, et l'enfant composant l'obtenir (et d'être informé par ngOnChanges). Vous pouvez également émettre un événement à l'aide d'un service partagé qui est Observable.

OriginalL'auteur code1 | 2017-05-18

angular typescript

61

À l'aide de RxJs, vous pouvez déclarer un Objet dans votre composant parent et de le passer comme Observable pour enfant composant, composant enfant juste besoin de souscrire à cette Observable.

Parent-Composant
```
private eventsSubject: Subject<void> = new Subject<void>();

emitEventToChild() {
  this.eventsSubject.next()
}
```
Parent-HTML
```
<child [events]="eventsSubject.asObservable()"> </child>    
```
Enfant-Composant
```
private eventsSubscription: any

@Input() events: Observable<void>;

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

ngOnDestroy() {
  this.eventsSubscription.unsubscribe()
}
```
Aussi, les données peuvent être transmis en même temps que l'événement à l'aide de cette approche. Comme,this.eventsSubject.next({data}); dans le parent, puis this.events.subscribe(({data}) => doSomething(data)); de l'enfant.
J'ai édité cette grande réponse pour ajouter de désabonnement. +1
Probablement une question de débutant ici: Pourquoi convertir eventsSubject à une Observable au lieu de simplement en vous abonnant à elle en tant que Sujet?
La conversion de eventsSubject à une Observable, empêcher l'enfant-composant pour l'appel suivant().

OriginalL'auteur Blue
40

Autant que je sache, il y a 2 façon standard, vous pouvez le faire.

1. @Input

Dès que les données du parent changements, l'enfant est notifié à ce sujet dans
le ngOnChanges méthode. L'enfant peut agir sur elle. C'est la norme
façon d'interagir avec l'enfant.
```
Parent-Component
public inputToChild: Object;

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

Child-Component: @Input() data;

ngOnChanges(changes: SimpleChanges){

//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.
}
```
1. De services partagés concept
La création d'un service et à l'aide d'une observable dans le service partagé. L'enfant
il s'y inscrit et chaque fois qu'il y a un changement, l'enfant sera notifié. C'est aussi une méthode populaire. Lorsque vous voulez envoyer quelque chose d'autre que les données que vous passez l'entrée, ceci 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.})
```
J'ai essayé la première méthode et il a bien fonctionné jusqu'à un certain point, et ensuite j'ai un message d'erreur indiquant que La valeur a été changé maintenant, plus tôt qu'il est faux et maintenant il est vrai. Il ne me donne pas plus d'explication en dehors de cela.
Étant donné que vous entendez un ExpressionChangedAfterItHasBeenCheckederror, cette erreur ne sera pas jeté dans le mode de production.
<child [data]="inputToChild"> </child> devrait probablement être <child [data]="(inputToChild)"> </child> à obtenir des changements

OriginalL'auteur prajwal gonsalves
6

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

Dans le composant enfant vous déclarez qu'il est :

@Input() myInputName: myType

De lier une propriété d'un parent à un enfant que vous devez ajouter dans vous le gabarit de la liaison entre crochets 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 chez l'enfant, le parent du var sera aussi mis à jour.
Cela pourrait conduire à des comportements indésirables de temps en temps.
Avec les principaux types de la valeur est copiée.

Pour aller plus loin lire ceci :

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

OriginalL'auteur Noki
1

Parent, vous pouvez faire référence à l'enfant à l'aide de @ViewChild. En cas de besoin (c'est à dire lorsque l'événement est déclenché), vous pouvez exécuter une méthode dans l'enfant de la mère à l'aide de @ViewChild de référence.

OriginalL'auteur Paul Evans

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

@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();
    }
}

Cela semble plus propre que de travailler avec des observables. Inconvénient de l'enfant doit être en vue. Si l'enfant est chargé avec de routage par exemple, cela ne fonctionne pas comme numberComponent sera undefined.

OriginalL'auteur Hardik Patel

Vous devez vous connecter pour publier un commentaire.