Angular, compiler et créer des composants à l'exécution

Question

J'essaie de rendre un outil de génération de documents en mode angulaire et je suis en train de relever un défi avec la façon dont j'autoriserais un utilisateur à créer dynamiquement du contenu.

Mes composants que je veux créer peuvent avoir des modèles et des comportements arbitraires, donc je ne pense pas que je pourrais utiliser un composant partagé.

Les composants que je décris n'existeraient pas au moment de la compilation. Je vois quelques documentation for rendering dynamic components Cependant il mentionne que vous devez lister le composant "dynamique" dans entryComponents dans le ngModule. ne fonctionnera pas pour mon scénario.

Existe-t-il un autre mécanisme pour obtenir cet effet?

Answer 1

Vous pouvez créer un module et un composant à la volée, y appliquer des décorateurs, puis compiler le tout. Ensuite, vous serez en mesure d'accéder aux composants compilés:

@ViewChild('vc', {read: ViewContainerRef}) vc: ViewContainerRef; 

constructor(private _compiler: Compiler, 
      private _injector: Injector, 
      private _m: NgModuleRef<any>) { 
} 

ngAfterViewInit() { 
    const template = '<span>generated on the fly: {{name}}</span>'; 

    const tmpCmp = Component({template: template})(class { 
    }); 
    const tmpModule = NgModule({declarations: [tmpCmp]})(class { 
    }); 

    this._compiler.compileModuleAndAllComponentsAsync(tmpModule) 
    .then((factories) => { 
     const f = factories.componentFactories[0]; 
     const cmpRef = f.create(this._injector, [], null, this._m); 
     cmpRef.instance.name = 'dynamic'; 
     this.vc.insert(cmpRef.hostView); 
    }) 
} 

Pour cette approche fonctionne, vous devez apporter compilateur pour le moteur d'exécution. Pour plus de détails sur les composants dynamiques lire l'article:

• Here is what you need to know about dynamic components in Angular