angulaire 4+ attribuer @Input pour ngComponentOutlet composant créé dynamiquement
Angulaire 4 pour créer dynamiquement un composant, vous pouvez utiliser ngComponentOutlet
directive: https://angular.io/docs/ts/latest/api/common/index/NgComponentOutlet-directive.html
quelque chose comme ceci:
Composante dynamique
@Component({
selector: 'dynamic-component',
template: `
Dynamic component
`
})
export class DynamicComponent {
@Input() info: any;
}
Application
@Component({
selector: 'my-app',
template: `
App<br>
<ng-container *ngComponentOutlet="component"></ng-container>
`
})
export class AppComponent {
this.component=DynamicComponent;
}
Comment puis-je passer @Input() info: any;
de l'information dans ce modèle <ng-container *ngComponentOutlet="component"></ng-container>
?
source d'informationauteur Doua Beri
Vous devez vous connecter pour publier un commentaire.
Une telle fonctionnalité a été mentionné dans la demande d'extraction pour
ngComponentOutlet
mais a été abandonné pour l'instant.Même les
componentRef
montré actuellement en https://angular.io/docs/ts/latest/api/common/index/NgComponentOutlet-directive.html n'est pas publique et ne sont donc disponibles https://github.com/angular/angular/blob/3ef73c2b1945340ca6bd21f1790260c88698ae26/modules/%40angular/common/src/directives/ng_component_outlet.ts#L78Je vous suggère de créer votre propre directive dérivé de https://github.com/angular/angular/blob/3ef73c2b1945340ca6bd21f1790260c88698ae26/modules/%40angular/common/src/directives/ng_component_outlet.ts#L72
et assigner des valeurs aux entrées comme indiqué dans Angulaire 2 dynamique des onglets avec l'utilisateur, cliquez sur composants choisis
Avec l'aide du post de @Günter Zöchbauer j'ai résolu un problème similaire de cette façon - j'espère que vous pouvez l'adapter en quelque sorte.
J'ai d'abord défini certaines interfaces:
puis j'ai mis en place à l'intérieur de la charger dynamiquement des composants
dynamicLoadedComponentA.ts
Après ce que j'ai construit un nouveau composant qui est responsable de la magie. L'Important est ici que j'ai eu à enregistrer tous dyn. chargé de composants comme entryComponents.
dynamique.composante.ts
ici l'utilisation de cette brillante de nouveaux trucs:
app.html
app.ts
Je pense que pour l'instant vous pouvez utiliser
https://www.npmjs.com/package/ng-dynamic-component
Elle est faite spécialement pour ce problème