4
votes

Comment passer le composant parent au composant enfant dans Angular 7 via @Input ()

En utilisant Angular 7,

J'ai un composant qui a une propriété d'entrée qui est un objet qu'il interroge pour obtenir des informations.

export class DetailsComponent implements OnInit{

    @Input() item: any;
    @Input() key: string;

    ngInit(){
      if(this.item && this.item.isYummy){
       ....
      }
    }
    ...
}

Dans le composant j'ai alors une propriété d'entrée comme celle-ci ...

<app-details [item]="whatGoeHere" key="firstName"></app-details>

Lorsque l'objet que je veux transmettre est une propriété du composant parent, je fournis simplement un nom de propriété sur le composant parent et tout va bien.

Mais que se passe-t-il si je veux transmettre l'instance du composant parent elle-même plutôt que l'une de ses propriétés? Comment cela peut-il être fait?

Dans certains cas, ce ne sera pas l'instance du composant parent mais l'une de ses propriétés, donc je veux pouvoir spécifier dans la liaison plutôt que de toujours faire référence au parent. p>

Dans KnockoutJs, je peux utiliser $ data, $ root pour faire référence au contexte de liaison. Existe-t-il un concept similaire dans Angular?

angular

1 commentaires

Crochet du cycle de vie ngAfterViewChecked

3 Réponses :

2
votes

Dans le html de l'hôte

export class DetailsComponent implements OnInit{

    @Input() item: any;
    @Input() key: string;
    @Input() context;

    ngInit(){
      if(this.item && this.item.isYummy){
       ....
      }
    }
    ...
}

Et définissez la propriété d'entrée dans le composant

<app-details [item]="whatGoeHere" key="firstName" [context]="this"></app-details>

2 commentaires

ce! Assez évident maintenant et exactement ce dont j'ai besoin. J'avais supposé qu'il y avait une syntaxe angulaire étrange.

Heureux d'avoir pu aider. :)

1
votes

Pourquoi voulez-vous transmettre tout le composant parent? que prévoyez-vous de faire avec le parent à l'intérieur de l'enfant?

Ma première réaction est: vous ne devriez pas vouloir passer le parent entier à un enfant car vous vous retrouverez avec 2 composants étroitement couplés. p >

Vous pouvez consulter la documentation d'Angular pour savoir comment faire interagir votre composant, là où vous Je vais voir les alternatives suivantes et bien plus.

Pour que le parent écoute les événements enfants

Passez une fonction du parent à l'enfant. L'enfant peut invoquer cette fonction pour parler au parent:

<app-details (myCallback)="parentFunction()" key="firstName"></app-details>;

La documentation d'Angular pour faire cela est here

Pour établir une communication bidirectionnelle entre parent et enfant

Utilisez un service si vous voulez une communication bidirectionnelle. Vous pouvez modifier les données du service à partir de l'enfant et demander au parent de s'abonner aux modifications. Le parent peut également envoyer des modifications au service avec une autre méthode, et vous pouvez également demander à l'enfant de s'abonner à ces modifications.

La documentation d'Angular pour ce faire est ici

2 commentaires

Un gros drapeau rouge pour passer le parent à l'enfant est noté. La raison en est que le composant parent dans ce cas implémente une interface dont le composant enfant appellera certains membres. Dans d'autres cas, ce ne sera pas le composant parent.

Pourriez-vous transmettre les membres individuels en tant que sorties au composant enfant?

-1
votes

Passez le contexte du composant parent au composant enfant en tant qu'entrée.

J'ai créé la réponse stackblitz. Vérifiez ceci ...

transmettre le composant parent à l'enfant

0 commentaires