Comment puis-je utiliser/créer un modèle dynamique pour la compilation dynamique de la Composante Angulaire 2.0?

MODIFIER liées à 2.3.0 (2016-12-07)

REMARQUE: pour obtenir la solution pour la version précédente, vérifier l'historique de ce post

Sujet similaire est question ici L'équivalent de $compiler Angulaire 2. Nous avons besoin d'utiliser JitCompiler et NgModule. Lire plus à propos de NgModule dans Angular2 ici:

• Angulaire 2 RC5 - NgModules, le Chargement Paresseux et AoT compilation

En un Mot

Il est un travail plunker/exemple (modèle dynamique, dynamique type de composant, module dynamique,JitCompiler, ... dans l'action)

Le principal est:

1) créer un Modèle

2) trouver ComponentFactory en cache - aller à 7)

3) - créer Component

4) - créer Module

5) - compiler Module

6) - retour (et de mise en cache pour une utilisation ultérieure) ComponentFactory

7) utilisation Cible et ComponentFactory pour créer une Instance de la dynamique Component

Voici un extrait de code (plus de ici) - Notre Constructeur personnalisé est de retour juste construit dans le cache ComponentFactory et la vue de la Cible de l'espace réservé de consommer pour créer une instance de la DynamicComponent

  //here we get a TEMPLATE with dynamic content === TODO
  var template = this.templateBuilder.prepareTemplate(this.entity, useTextarea);

  //here we get Factory (just compiled or from cache)
  this.typeBuilder
      .createComponentFactory(template)
      .then((factory: ComponentFactory<IHaveDynamicData>) =>
    {
        //Target will instantiate and inject component (we'll keep reference to it)
        this.componentRef = this
            .dynamicComponentTarget
            .createComponent(factory);

        //let's inject @Inputs to component instance
        let component = this.componentRef.instance;

        component.entity = this.entity;
        //...
    });

C'est-il - en bref il. Pour obtenir plus de détails.. lire ci-dessous

.

TL&DR

Observer une plunker et revenir à lire les détails au cas où certains l'extrait de code nécessite plus d'explications

.

Explication détaillée - Angular2 RC6++ & les composants runtime

Ci-dessous la description de ce scénario, nous allons

1. créer un module PartsModule:NgModule (titulaire de petits morceaux)
2. créer un autre module DynamicModule:NgModule, qui contiendra notre composant dynamique (et de référence PartsModule dynamiquement)
3. créer de Modèle dynamique (approche simple)
4. créer de nouveaux Component type (seulement si le modèle a changé)
5. créer de nouveaux RuntimeModule:NgModule. Ce module inclut les créée précédemment Component type
6. appel JitCompiler.compileModuleAndAllComponentsAsync(runtimeModule) pour obtenir ComponentFactory
7. créer une Instance de la DynamicComponent - emploi de la Vue Cible de l'espace réservé et ComponentFactory
8. attribuer @Inputs à nouvelle instance (interrupteur de INPUT à TEXTAREA édition), consommer @Outputs

NgModule

Nous avons besoin d'un NgModules.

Alors que je voudrais montrer un exemple très simple, dans ce cas, j'aurais besoin de trois modules (en fait, 4 - mais je ne compte pas le AppModule). S'il vous plaît, prenez ce plutôt qu'un simple extrait de comme base pour un très solide composante dynamique du générateur.

Il y aura un module pour tous les petits composants, par ex. string-editor, text-editor (date-editor, number-editor...)

@NgModule({
  imports:      [ 
      CommonModule,
      FormsModule
  ],
  declarations: [
      DYNAMIC_DIRECTIVES
  ],
  exports: [
      DYNAMIC_DIRECTIVES,
      CommonModule,
      FormsModule
  ]
})
export class PartsModule { }

Où DYNAMIC_DIRECTIVES sont extensibles et sont destinés à contenir toutes les petites pièces utilisées pour notre modèle de Composant/type. Vérifier app/pièces de rechange/pièces.le module.ts

Le deuxième module pour notre Dynamique trucs de manipulation. Il contiendra l'hébergement de composants et de certains fournisseurs.. qui sera singletons. Pour cela, nous les publierons façon standard - avec forRoot()

import { DynamicDetail }          from './detail.view';
import { DynamicTypeBuilder }     from './type.builder';
import { DynamicTemplateBuilder } from './template.builder';

@NgModule({
  imports:      [ PartsModule ],
  declarations: [ DynamicDetail ],
  exports:      [ DynamicDetail],
})

export class DynamicModule {

    static forRoot()
    {
        return {
            ngModule: DynamicModule,
            providers: [ //singletons accross the whole app
              DynamicTemplateBuilder,
              DynamicTypeBuilder
            ], 
        };
    }
}

Vérifier l'utilisation de la forRoot() dans le AppModule

Enfin, nous aurons besoin d'une adhoc, module d'exécution.. mais qui sera créé plus tard, comme une partie de DynamicTypeBuilder travail.

Le quatrième module, module d'application, est celui qui fait ce que déclare compilateur fournisseurs:

...
import { COMPILER_PROVIDERS } from '@angular/compiler';    
import { AppComponent }   from './app.component';
import { DynamicModule }    from './dynamic/dynamic.module';

@NgModule({
  imports:      [ 
    BrowserModule,
    DynamicModule.forRoot() //singletons
  ],
  declarations: [ AppComponent],
  providers: [
    COMPILER_PROVIDERS //this is an app singleton declaration
  ],

Lire (lire) beaucoup plus sur NgModule là:

• Angulaire 2 RC5 - NgModules, le Chargement Paresseux et AoT compilation
• Angulaire de la documentation des Modules

Un modèle constructeur

Dans notre exemple, nous traiterons en détail de ce genre de entité

entity = { 
    code: "ABC123",
    description: "A description of this Entity" 
};

Pour créer un template, dans ce plunker nous utilisons cette simple/naïve builder.

La vraie solution, un véritable modèle du générateur, est l'endroit où votre application peut faire beaucoup

//plunker - app/dynamic/template.builder.ts
import {Injectable} from "@angular/core";

@Injectable()
export class DynamicTemplateBuilder {

    public prepareTemplate(entity: any, useTextarea: boolean){

      let properties = Object.keys(entity);
      let template = "<form >";
      let editorName = useTextarea 
        ? "text-editor"
        : "string-editor";

      properties.forEach((propertyName) =>{
        template += `
          <${editorName}
              [propertyName]="'${propertyName}'"
              [entity]="entity"
          ></${editorName}>`;
      });

      return template + "</form>";
    }
}

Une astuce ici est - il construit un modèle qui utilise un ensemble de propriétés connues, par exemple entity. Ces biens(-ies) doivent faire partie de la composante dynamique, que nous allons créer par la suite.

Pour le rendre un peu plus facile, nous pouvons utiliser une interface pour définir les propriétés de notre Modèle de générateur pouvez utiliser. Ce sera mis en œuvre par notre dynamique de type de Composant.

export interface IHaveDynamicData { 
    public entity: any;
    ...
}

Un ComponentFactory constructeur

Chose de très important ici est de garder à l'esprit:

notre type de composant, de construire avec nos DynamicTypeBuilder, pourraient être différents, mais seulement par son modèle (créé ci-dessus). Des composants propriétés de (entrées, sorties ou certains protégés) sont toujours de même. Si nous avons besoin de différentes propriétés, nous devons définir les différentes combinaison de Modèle et le Type de Générateur de

Nous sommes, donc, de toucher le cœur de notre solution. Le Constructeur, 1) créer ComponentType 2) créer son NgModule 3) compiler ComponentFactory 4) cache pour les réutiliser ultérieurement.

Une dépendance, nous devons le recevoir:

//plunker - app/dynamic/type.builder.ts
import { JitCompiler } from '@angular/compiler';

@Injectable()
export class DynamicTypeBuilder {

  //wee need Dynamic component builder
  constructor(
    protected compiler: JitCompiler
  ) {}

Et voici un extrait de comment obtenir une ComponentFactory:

//plunker - app/dynamic/type.builder.ts
//this object is singleton - so we can use this as a cache
private _cacheOfFactories:
     {[templateKey: string]: ComponentFactory<IHaveDynamicData>} = {};

public createComponentFactory(template: string)
    : Promise<ComponentFactory<IHaveDynamicData>> {    
    let factory = this._cacheOfFactories[template];

    if (factory) {
        console.log("Module and Type are returned from cache")

        return new Promise((resolve) => {
            resolve(factory);
        });
    }

    //unknown template ... let's create a Type for it
    let type   = this.createNewComponent(template);
    let module = this.createComponentModule(type);

    return new Promise((resolve) => {
        this.compiler
            .compileModuleAndAllComponentsAsync(module)
            .then((moduleWithFactories) =>
            {
                factory = _.find(moduleWithFactories.componentFactories
                                , { componentType: type });

                this._cacheOfFactories[template] = factory;

                resolve(factory);
            });
    });
}

Au-dessus de nous créer et cache les deux Component et Module. Car si le modèle (en fait, la véritable dynamique de la partie de tous) de est la même.. on peut réutiliser

Et voici deux méthodes, qui représentent la façon vraiment cool comment créer un décorées classes/types à l'exécution. Non seulement @Component mais aussi la @NgModule

protected createNewComponent (tmpl:string) {
  @Component({
      selector: 'dynamic-component',
      template: tmpl,
  })
  class CustomDynamicComponent  implements IHaveDynamicData {
      @Input()  public entity: any;
  };
  //a component for this particular template
  return CustomDynamicComponent;
}
protected createComponentModule (componentType: any) {
  @NgModule({
    imports: [
      PartsModule, //there are 'text-editor', 'string-editor'...
    ],
    declarations: [
      componentType
    ],
  })
  class RuntimeComponentModule
  {
  }
  //a module for just this Type
  return RuntimeComponentModule;
}

Important:

notre composante dynamique de types différents, mais juste par le modèle. Nous avons donc l'utilisation que fait à cache eux. C'est vraiment très important. Angular2 permettra également de cache ces.. par la type. Et si nous voulons recréer pour le même modèle de chaînes de nouveaux types... nous allons commencer à générer des fuites de mémoire.

ComponentFactory utilisé par le composant d'hébergement

Dernière pièce est une composante, qui accueille la cible pour notre composant dynamique, par exemple <div #dynamicContentPlaceHolder></div>. Nous obtenir une référence à elle et l'utilisation ComponentFactory pour créer un composant. C'est en un mot, et voici tous les morceaux de ce composant (si nécessaire, ouvrez plunker ici)

Nous allons d'abord résumer les déclarations d'importation:

import {Component, ComponentRef,ViewChild,ViewContainerRef}   from '@angular/core';
import {AfterViewInit,OnInit,OnDestroy,OnChanges,SimpleChange} from '@angular/core';

import { IHaveDynamicData, DynamicTypeBuilder } from './type.builder';
import { DynamicTemplateBuilder }               from './template.builder';

@Component({
  selector: 'dynamic-detail',
  template: `
<div>
  check/uncheck to use INPUT vs TEXTAREA:
  <input type="checkbox" #val (click)="refreshContent(val.checked)" /><hr />
  <div #dynamicContentPlaceHolder></div>  <hr />
  entity: <pre>{{entity | json}}</pre>
</div>
`,
})
export class DynamicDetail implements AfterViewInit, OnChanges, OnDestroy, OnInit
{ 
    //wee need Dynamic component builder
    constructor(
        protected typeBuilder: DynamicTypeBuilder,
        protected templateBuilder: DynamicTemplateBuilder
    ) {}
    ...

Nous venons de recevoir, le modèle et les producteurs de composantes. À côté sont des propriétés qui sont nécessaires pour notre exemple (plus dans les commentaires)

//reference for a <div> with #dynamicContentPlaceHolder
@ViewChild('dynamicContentPlaceHolder', {read: ViewContainerRef}) 
protected dynamicComponentTarget: ViewContainerRef;
//this will be reference to dynamic content - to be able to destroy it
protected componentRef: ComponentRef<IHaveDynamicData>;

//until ngAfterViewInit, we cannot start (firstly) to process dynamic stuff
protected wasViewInitialized = false;

//example entity ... to be recieved from other app parts
//this is kind of candiate for @Input
protected entity = { 
    code: "ABC123",
    description: "A description of this Entity" 
  };

Dans ce scénario simple, notre hébergement composant n'a pas de @Input. Afin de ne pas avoir à réagir aux changements. Mais en dépit de ce fait (et pour être prêt pour les changements à venir) - nous avons besoin d'introduire quelques drapeau si le composant a déjà été (d'abord) initié. Et seulement alors nous pouvons commencer la magie.

Enfin, nous allons utiliser notre générateur de composants, et de ses compilé juste le cache ComponentFacotry. Notre Cible de l'espace réservé sera demandé pour instancier la Component avec cette usine.

protected refreshContent(useTextarea: boolean = false){

  if (this.componentRef) {
      this.componentRef.destroy();
  }

  //here we get a TEMPLATE with dynamic content === TODO
  var template = this.templateBuilder.prepareTemplate(this.entity, useTextarea);

  //here we get Factory (just compiled or from cache)
  this.typeBuilder
      .createComponentFactory(template)
      .then((factory: ComponentFactory<IHaveDynamicData>) =>
    {
        //Target will instantiate and inject component (we'll keep reference to it)
        this.componentRef = this
            .dynamicComponentTarget
            .createComponent(factory);

        //let's inject @Inputs to component instance
        let component = this.componentRef.instance;

        component.entity = this.entity;
        //...
    });
}

petite extension

Aussi, nous avons besoin de garder une référence de modèle compilé.. pour pouvoir correctement destroy(), chaque fois que nous allons changer.

//this is the best moment where to start to process dynamic stuff
public ngAfterViewInit(): void
{
    this.wasViewInitialized = true;
    this.refreshContent();
}
//wasViewInitialized is an IMPORTANT switch 
//when this component would have its own changing @Input()
//- then we have to wait till view is intialized - first OnChange is too soon
public ngOnChanges(changes: {[key: string]: SimpleChange}): void
{
    if (this.wasViewInitialized) {
        return;
    }
    this.refreshContent();
}

public ngOnDestroy(){
  if (this.componentRef) {
      this.componentRef.destroy();
      this.componentRef = null;
  }
}

fait

Qui est à peu près tout. N'oubliez pas de Détruire rien de ce qui a été construit de manière dynamique (ngOnDestroy). Aussi, assurez-vous de cache dynamique types et modules si la seule différence est leur modèle.

Vérifier tout cela en action ici

pour voir les versions antérieures (par exemple, RC5 liées) de ce post, vérifier la l'histoire

Je doit être arrivé à la fin de la partie, aucune des solutions ici semblait utile pour moi - trop salissant et ressenti comme trop d'une solution de contournement.

Ce que j'ai fini par faire, c'est à l'aide de Angular 4.0.0-beta.6's ngComponentOutlet.

Cela m'a donné le plus court, le plus simple solution de tous les écrits dans la dynamique de fichier du composant.

• Voici un exemple simple qui reçoit le texte et le place dans un modèle, mais vous pouvez bien évidemment changer en fonction de votre besoin:

import {
Component, OnInit, Input, NgModule, NgModuleFactory, Compiler
} from '@angular/core';
@Component({
selector: 'my-component',
template: `<ng-container *ngComponentOutlet="dynamicComponent;
ngModuleFactory: dynamicModule;"></ng-container>`,
styleUrls: ['my.component.css']
})
export class MyComponent implements OnInit {
dynamicComponent;
dynamicModule: NgModuleFactory<any>;
@Input()
text: string;
constructor(private compiler: Compiler) {
}
ngOnInit() {
this.dynamicComponent = this.createNewComponent(this.text);
this.dynamicModule = this.compiler.compileModuleSync(this.createComponentModule(this.dynamicComponent));
}
protected createComponentModule (componentType: any) {
@NgModule({
imports: [],
declarations: [
componentType
],
entryComponents: [componentType]
})
class RuntimeComponentModule
{
}
//a module for just this Type
return RuntimeComponentModule;
}
protected createNewComponent (text:string) {
let template = `dynamically created template with text: ${text}`;
@Component({
selector: 'dynamic-component',
template: template
})
class DynamicComponent implements OnInit{
text: any;
ngOnInit() {
this.text = text;
}
}
return DynamicComponent;
}
}

• Courte explication:
  1. my-component - le composant dans lequel un composant dynamique est rendu
  2. DynamicComponent - le composant à être construite dynamiquement et il est rendu à l'intérieur de mon composant

N'oubliez pas de mettre à jour tous les angles bibliothèques ^Angulaire 4.0.0

Espère que cette aide, bonne chance!

Mise à JOUR

Travaille aussi pour angulaires 5.

Juin 2019 réponse

Une excellente nouvelle! Il semble que la @angulaire/cdk paquet a maintenant le soutien de première classe pour portails!

Au temps de l'écriture, je n'ai pas trouvé la-dessus officielle docs particulièrement utile (notamment pour l'envoi de données vers et à recevoir des événements de la dynamique de composants). En résumé, vous aurez besoin de:

Étape 1) mise à Jour de votre AppModule

Importation PortalModule de la cdk paquet et enregistrer votre composante dynamique(s) à l'intérieur de entryComponents

@NgModule({
declarations: [ ..., AppComponent, MyDynamicComponent, ... ]
imports:      [ ..., PortalModule, ... ],
entryComponents: [ ..., MyDynamicComponent, ... ]
})
export class AppModule { }

L'étape 2. Option A: Si vous n'avez PAS besoin de passer des données et recevoir des événements à partir des composants dynamiques:

@Component({
selector: 'my-app',
template: `
<button (click)="onClickAddChild()">Click to add child component</button>
<ng-template [cdkPortalOutlet]="myPortal"></ng-template>
`
})
export class AppComponent  {
myPortal: ComponentPortal<any>;
onClickAddChild() {
this.myPortal = new ComponentPortal(MyDynamicComponent);
}
}
@Component({
selector: 'app-child',
template: `<p>I am a child.</p>`
})
export class MyDynamicComponent{
}

Le voir en action

L'étape 2. Option B: Si vous avez besoin de transmettre des données et recevoir des événements à partir des composants dynamiques:

//A bit of boilerplate here. Recommend putting this function in a utils 
//file in order to keep your component code a little cleaner.
function createDomPortalHost(elRef: ElementRef, injector: Injector) {
return new DomPortalHost(
elRef.nativeElement,
injector.get(ComponentFactoryResolver),
injector.get(ApplicationRef),
injector
);
}
@Component({
selector: 'my-app',
template: `
<button (click)="onClickAddChild()">Click to add random child component</button>
<div #portalHost></div>
`
})
export class AppComponent {
portalHost: DomPortalHost;
@ViewChild('portalHost') elRef: ElementRef;
constructor(readonly injector: Injector) {
}
ngOnInit() {
this.portalHost = createDomPortalHost(this.elRef, this.injector);
}
onClickAddChild() {
const myPortal = new ComponentPortal(MyDynamicComponent);
const componentRef = this.portalHost.attach(myPortal);
setTimeout(() => componentRef.instance.myInput 
= '> This is data passed from AppComponent <', 1000);
//... if we had an output called 'myOutput' in a child component, 
//this is how we would receive events...
//this.componentRef.instance.myOutput.subscribe(() => ...);
}
}
@Component({
selector: 'app-child',
template: `<p>I am a child. <strong>{{myInput}}</strong></p>`
})
export class MyDynamicComponent {
@Input() myInput = '';
}

Le voir en action

Résolu ce Angulaire 2 version Finale en utilisant simplement la dynamicComponent directive de ng-dynamique.

Utilisation:

<div *dynamicComponent="template; context: {text: text};"></div>

Où le modèle est votre modèle dynamique et le contexte peut être défini dynamique modèle de données que vous voulez que votre modèle de lier à.

Suivi Radmin est une excellente réponse, il y a une petite astuce nécessaire pour tout le monde qui est à l'aide angulaires-cli version 1.0.0-bêta.22 et au-dessus.

COMPILER_PROVIDERSne peuvent plus être importés (pour les détails, voir angulaires-cli GitHub).

Donc la solution de contournement est de ne pas utiliser COMPILER_PROVIDERS et JitCompiler dans le providers l'article, mais l'utilisation JitCompilerFactory de '@angulaire/compilateur' à la place comme ceci à l'intérieur du type constructeur de la classe:

private compiler: Compiler = new JitCompilerFactory([{useDebug: false, useJit: true}]).createCompiler();

Comme vous pouvez le voir, il n'est pas injectable et donc n'a pas de dépendances avec le DI. Cette solution devrait également fonctionner pour les projets à l'aide angulaires-cli.

Je suis moi-même en train de voir comment je peux mettre à jour le RC4 pour RC5 et donc je suis tombé sur cette entrée et la nouvelle approche de la dynamique de la création de composant contient encore un peu de mystère pour moi, donc j'ai l'habitude de proposer quoi que ce soit sur la composante de l'usine de résolution.

Mais, ce que je peux suggérer, c'est un peu plus claire de la démarche de création d'un composant sur ce scénario, utilisez simplement basculer dans un modèle qui permettrait de créer de la chaîne de l'éditeur ou un éditeur de texte en fonction de certaines conditions, comme ceci:

<form [ngSwitch]="useTextarea">
<string-editor *ngSwitchCase="false" propertyName="'code'" 
[entity]="entity"></string-editor>
<text-editor *ngSwitchCase="true" propertyName="'code'" 
[entity]="entity"></text-editor>
</form>

Et par la manière, " [ " , dans [prop] expression ait un sens, cela indique un moyen de liaison de données, d'où vous pouvez et même devez omettre ceux dans le cas où si vous savez que vous n'avez pas besoin de lier la propriété de la variable.

Pour ce cas particulier, ressemble à l'aide d'une directive pour créer dynamiquement le composant serait une meilleure option.
Exemple:

Dans le code HTML où vous voulez créer le composant

<ng-container dynamicComponentDirective [someConfig]="someConfig"></ng-container>

Je l'approche et la conception de la directive de la manière suivante.

const components: {[type: string]: Type<YourConfig>} = {
text : TextEditorComponent,
numeric: NumericComponent,
string: StringEditorComponent,
date: DateComponent,
........
.........
};
@Directive({
selector: '[dynamicComponentDirective]'
})
export class DynamicComponentDirective implements YourConfig, OnChanges, OnInit {
@Input() yourConfig: Define your config here //;
component: ComponentRef<YourConfig>;
constructor(
private resolver: ComponentFactoryResolver,
private container: ViewContainerRef
) {}
ngOnChanges() {
if (this.component) {
this.component.instance.config = this.config;
//config is your config, what evermeta data you want to pass to the component created.
}
}
ngOnInit() {
if (!components[this.config.type]) {
const supportedTypes = Object.keys(components).join(', ');
console.error(`Trying to use an unsupported type ${this.config.type} Supported types: ${supportedTypes}`);
}
const component = this.resolver.resolveComponentFactory<yourConfig>(components[this.config.type]);
this.component = this.container.createComponent(component);
this.component.instance.config = this.config;
}
}

Dans votre composants de texte, string, date, quelle que soit la quelle que soit la configuration que vous avez été de passage dans le code HTML dans le ng-container élément serait disponible.

La config, yourConfig, peut être le même et de définir les métadonnées.

En fonction de votre config ou le type d'entrée de la directive doit agir en conséquence et de types pris en charge, il aurait rendu le composant approprié. Si non il va se connecter une erreur.