83 votes

Comment utilisez-vous @Input avec des composants créés avec un ComponentFactoryResolver?

Est-il une méthode qui peut être utilisée pour définir un @Entrée de la propriété sur Angulaire à 2 composant créé dynamiquement?

Je suis à l'aide de la ComponentFactoryResolver pour créer des composants dans un conteneur de composant. Par exemple:

let componentFactory = this.componentFactoryResolver.resolveComponentFactory(componentName);

let componentRef = entryPoint.createComponent(componentFactory);

Où "point d'entrée" est quelque chose comme cela dans le composant HTML:

<div #entryPoint></div>

Et de mon composant conteneur avec:

@ViewChild('entryPoint', { read: ViewContainerRef } entryPoint: ViewContainerRef;

Cela fonctionne bien, mais je ne peux pas trouver un moyen de faire un @de la propriété Input de travail sur le composant nouvellement créé. Je sais que vous pouvez définir explicitement les propriétés publiques sur la classe de composant, mais cela ne semble pas fonctionner avec ng-réfléchir. Avant de faire ce changement, j'ai eu une "sélection" de la propriété décorée avec "@Input()" qui a provoqué Angulaire ajouter les éléments suivants pour les DOM:

<my-component ng-reflected-selected="true"></my-component>

Dans ce lieu, j'ai été en mesure de mettre à jour dynamiquement le balisage pour passer d'une classe CSS:

<div class="header" [class.active-header]="selected === true"></div>

Basé sur quelques recherches j'ai pu trouver une méthode pour faire "@" Sortie " fonctionne comme prévu, mais je n'ai pas encore trouver quelque chose pour @Entrée.

Laissez-moi savoir si un contexte supplémentaire serait utile et je serais heureux de l'ajouter.

84voto

Günter Zöchbauer Points 21340

Non, les liaisons Angular2 ne fonctionnent qu'avec des composants et des directives ajoutés de manière statique au modèle d'un composant.

Pour toutes les autres situations, utilisez les services partagés, comme expliqué dans https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service.

Vous pouvez aussi utiliser

 let componentRef = entryPoint.createComponent(componentFactory);
componentRef.instance.someProp = 'someValue';
componentRef.instance.someObservableOrEventEmitter.subscribe(data => this.prop = data);
 

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X