Je veux compiler manuellement certaines directives contenant du HTML. Quel est l'équivalent de $compiledans Angular 2?

Par exemple, dans Angular 1, je pourrais compiler dynamiquement un fragment de HTML et l'ajouter au DOM:

var e = angular.element('<div directive></div>');
element.append(e);
$compile(e)($scope);

Angulaire 2.3.0 (07/12/2016)

Pour obtenir tous les détails, vérifiez:

• Comment puis-je utiliser / créer un modèle dynamique pour compiler un composant dynamique avec Angular 2.0?

Pour voir cela en action:

• observer un plunker qui fonctionne (avec 2.3.0+)

Les principaux:

1) Créer un modèle
2) Créer un composant
3) Créer un module
4) Compiler un module
5) Créer (et mettre en cache) ComponentFactory
6) utiliser Target pour en créer une instance

Un aperçu rapide de la création d'un composant

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;
}

Un moyen d'injecter un composant dans NgModule

createComponentModule (componentType: any) {
  @NgModule({
    imports: [
      PartsModule, // there are 'text-editor', 'string-editor'...
    ],
    declarations: [
      componentType
    ],
  })
  class RuntimeComponentModule
  {
  }
  // a module for just this Type
  return RuntimeComponentModule;
}

Un extrait de code comment créer un ComponentFactory (et le mettre en cache)

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);
            });
    });
}

Un extrait de code comment utiliser le résultat ci-dessus

  // 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;
        //...
    });

La description complète avec tous les détails lisez ici , ou observez l' exemple de travail

.

.

OBSOLETE - lié à Angular 2.0 RC5 (RC5 uniquement)

pour voir les solutions précédentes pour les versions précédentes de RC, s'il vous plaît, recherchez dans l'historique de ce message

Remarque: comme @BennyBottema le mentionne dans un commentaire, DynamicComponentLoader est désormais obsolète, d'où cette réponse.

Angular2 n'a pas d' équivalent $ compile . Vous pouvez utiliser DynamicComoponentLoaderet pirater avec les classes ES6 pour compiler votre code dynamiquement (voir ce plunk ):

import {Component, DynamicComponentLoader, ElementRef, OnInit} from 'angular2/core'

function compileToComponent(template, directives) {
  @Component({ 
    selector: 'fake', 
    template , directives
  })
  class FakeComponent {};
  return FakeComponent;
}

@Component({
  selector: 'hello',
  template: '<h1>Hello, Angular!</h1>'
})
class Hello {}

@Component({
  selector: 'my-app',
  template: '<div #container></div>',
})
export class App implements OnInit {
  constructor(
    private loader: DynamicComponentLoader, 
    private elementRef: ElementRef,
  ) {}

  ngOnInit() {} {
    const someDynamicHtml = `<hello></hello><h2>${Date.now()}</h2>`;

    this.loader.loadIntoLocation(
      compileToComponent(someDynamicHtml, [Hello])
      this.elementRef,
      'container'
    );
  }
}

Mais cela ne fonctionnera que jusqu'à ce que l'analyseur HTML soit à l'intérieur du noyau angular2.

Version angulaire que j'ai utilisée - Angular 4.2.0

Angular 4 est venu avec ComponentFactoryResolver pour charger les composants au moment de l'exécution. C'est une sorte de même implémentation de $ compile dans Angular 1.0 qui répond à vos besoins

Dans cet exemple ci-dessous, je charge le composant ImageWidget dynamiquement dans un DashboardTileComponent

Afin de charger un composant, vous avez besoin d'une directive que vous pouvez appliquer à ng-template qui aidera à placer le composant dynamique

WidgetHostDirective

 import { Directive, ViewContainerRef } from '@angular/core';

    @Directive({
      selector: '[widget-host]',
    })
    export class DashboardTileWidgetHostDirective {
      constructor(public viewContainerRef: ViewContainerRef) { 


      }
    }

cette directive injecte ViewContainerRef pour accéder au conteneur de vue de l'élément qui hébergera le composant ajouté dynamiquement.

DashboardTileComponent (composant d'espace réservé pour le rendu du composant dynamique)

Ce composant accepte une entrée provenant d'un composant parent ou vous pouvez charger à partir de votre service en fonction de votre implémentation. Ce composant joue le rôle principal pour résoudre les composants lors de l'exécution. Dans cette méthode, vous pouvez également voir une méthode nommée renderComponent () qui charge finalement le nom du composant à partir d'un service et le résout avec ComponentFactoryResolver et enfin la définition des données sur le composant dynamique.

import { Component, Input, OnInit, AfterViewInit, ViewChild, ComponentFactoryResolver, OnDestroy } from '@angular/core';
import { DashboardTileWidgetHostDirective } from './DashbardWidgetHost.Directive';
import { TileModel } from './Tile.Model';
import { WidgetComponentService } from "./WidgetComponent.Service";


@Component({
    selector: 'dashboard-tile',
    templateUrl: 'app/tile/DashboardTile.Template.html'
})

export class DashboardTileComponent implements OnInit {
    @Input() tile: any;
    @ViewChild(DashboardTileWidgetHostDirective) widgetHost: DashboardTileWidgetHostDirective;
    constructor(private _componentFactoryResolver: ComponentFactoryResolver,private widgetComponentService:WidgetComponentService) {

    }

    ngOnInit() {

    }
    ngAfterViewInit() {
        this.renderComponents();
    }
    renderComponents() {
        let component=this.widgetComponentService.getComponent(this.tile.componentName);
        let componentFactory = this._componentFactoryResolver.resolveComponentFactory(component);
        let viewContainerRef = this.widgetHost.viewContainerRef;
        let componentRef = viewContainerRef.createComponent(componentFactory);
        (<TileModel>componentRef.instance).data = this.tile;

    }
}

DashboardTileComponent.html

 <div class="col-md-2 col-lg-2 col-sm-2 col-default-margin col-default">        
                        <ng-template widget-host></ng-template>

          </div>

WidgetComponentService

Il s'agit d'une fabrique de services pour enregistrer tous les composants que vous souhaitez résoudre dynamiquement

import { Injectable }           from '@angular/core';
import { ImageTextWidgetComponent } from "../templates/ImageTextWidget.Component";
@Injectable()
export class WidgetComponentService {
  getComponent(componentName:string) {
          if(componentName==="ImageTextWidgetComponent"){
              return ImageTextWidgetComponent
          }
  }
}

ImageTextWidgetComponent (composant que nous chargeons au moment de l'exécution)

import { Component, OnInit, Input } from '@angular/core';


@Component({
    selector: 'dashboard-imagetextwidget',
    templateUrl: 'app/templates/ImageTextWidget.html'
})

export class ImageTextWidgetComponent implements OnInit {
     @Input() data: any;
    constructor() { }

    ngOnInit() { }
}

Ajouter Enfin, ajoutez ce ImageTextWidgetComponent à votre module d'application en tant qu'entréeComponent

@NgModule({
    imports: [BrowserModule],
    providers: [WidgetComponentService],
    declarations: [
        MainApplicationComponent,
        DashboardHostComponent,
        DashboardGroupComponent,
        DashboardTileComponent,
        DashboardTileWidgetHostDirective,
        ImageTextWidgetComponent
        ],
    exports: [],
    entryComponents: [ImageTextWidgetComponent],
    bootstrap: [MainApplicationComponent]
})
export class DashboardModule {
    constructor() {

    }
}

TileModel

 export interface TileModel {
      data: any;
    }

Référence originale de mon blog

Documentation officielle

Télécharger un exemple de code source

ce package npm m'a facilité la tâche: https://www.npmjs.com/package/ngx-dynamic-template

usage:

<ng-template dynamic-template
             [template]="'some value:{{param1}}, and some component <lazy-component></lazy-component>'"
             [context]="{param1:'value1'}"
             [extraModules]="[someDynamicModule]"></ng-template>

Afin de créer de manière dynamique une instance d'un composant et de l'attacher à votre DOM, vous pouvez utiliser le script suivant et devrait fonctionner dans Angular RC :

modèle html:

<div>
  <div id="container"></div>
  <button (click)="viewMeteo()">Meteo</button>
  <button (click)="viewStats()">Stats</button>
</div>

Composant de chargeur

import { Component, DynamicComponentLoader, ElementRef, Injector } from '@angular/core';
import { WidgetMeteoComponent } from './widget-meteo';
import { WidgetStatComponent } from './widget-stat';

@Component({
  moduleId: module.id,
  selector: 'widget-loader',
  templateUrl: 'widget-loader.html',
})
export class WidgetLoaderComponent  {

  constructor( elementRef: ElementRef,
               public dcl:DynamicComponentLoader,
               public injector: Injector) { }

  viewMeteo() {
    this.dcl.loadAsRoot(WidgetMeteoComponent, '#container', this.injector);
  }

  viewStats() {
    this.dcl.loadAsRoot(WidgetStatComponent, '#container', this.injector);
  }

}

Angular TypeScript / ES6 (Angular 2+)

Fonctionne avec AOT + JIT à la fois ensemble.

J'ai créé comment l'utiliser ici: https://github.com/patrikx3/angular-compile

npm install p3x-angular-compile

Composant: devrait avoir un contexte et des données html ...

Html:

<div [p3x-compile]="data" [p3x-compile-context]="ctx">loading ...</div>

Vous pouvez voir le composant, qui permet de compiler des composants angulaires dynamiques simples https://www.npmjs.com/package/@codehint-ng/html-compiler

Je sais que ce problème est ancien, mais j'ai passé des semaines à essayer de comprendre comment faire fonctionner ce problème avec AOT activé. J'ai pu compiler un objet mais je n'ai jamais pu exécuter des composants existants. Eh bien, j'ai finalement décidé de changer de tact, car je ne cherchais pas tant à compiler du code qu'à exécuter un modèle personnalisé. Ma pensée était d'ajouter le html que tout le monde peut faire et boucler dans les usines existantes. Ce faisant, je peux rechercher l'élément / l'attribut / etc. et exécutez le composant sur ce HTMLElement. J'ai pu le faire fonctionner et j'ai pensé que je devrais partager cela pour sauver à quelqu'un d'autre l'immense temps que j'ai perdu.

@Component({
    selector: "compile",
    template: "",
    inputs: ["html"]
})
export class CompileHtmlComponent implements OnDestroy {
    constructor(
        private content: ViewContainerRef,
        private injector: Injector,
        private ngModRef: NgModuleRef<any>
    ) { }

    ngOnDestroy() {
        this.DestroyComponents();
    }

    private _ComponentRefCollection: any[] = null;
    private _Html: string;

    get Html(): string {
        return this._Html;
    }
    @Input("html") set Html(val: string) {
        // recompile when the html value is set
        this._Html = (val || "") + "";
        this.TemplateHTMLCompile(this._Html);
    }

    private DestroyComponents() { // we need to remove the components we compiled
        if (this._ComponentRefCollection) {
            this._ComponentRefCollection.forEach((c) => {
                c.destroy();
            });
        }
        this._ComponentRefCollection = new Array();
    }

    private TemplateHTMLCompile(html) {
        this.DestroyComponents();
        this.content.element.nativeElement.innerHTML = html;
        var ref = this.content.element.nativeElement;
        var factories = (this.ngModRef.componentFactoryResolver as any)._factories;
        // here we loop though the factories, find the element based on the selector
        factories.forEach((comp: ComponentFactory<unknown>) => {
            var list = ref.querySelectorAll(comp.selector);
            list.forEach((item) => {
                var parent = item.parentNode;
                var next = item.nextSibling;
                var ngContentNodes: any[][] = new Array(); // this is for the viewchild/viewchildren of this object

                comp.ngContentSelectors.forEach((sel) => {
                    var ngContentList: any[] = new Array();

                    if (sel == "*") // all children;
                    {
                        item.childNodes.forEach((c) => {
                            ngContentList.push(c);
                        });
                    }
                    else {
                        var selList = item.querySelectorAll(sel);

                        selList.forEach((l) => {
                            ngContentList.push(l);
                        });
                    }

                    ngContentNodes.push(ngContentList);
                });
                // here is where we compile the factory based on the node we have
                let component = comp.create(this.injector, ngContentNodes, item, this.ngModRef);

                this._ComponentRefCollection.push(component); // save for our destroy call
                // we need to move the newly compiled element, as it was appended to this components html
                if (next) parent.insertBefore(component.location.nativeElement, next);
                else parent.appendChild(component.location.nativeElement);

                component.hostView.detectChanges(); // tell the component to detectchanges
            });
        });
    }
}

Si vous souhaitez injecter du code html, utilisez la directive

<div [innerHtml]="htmlVar"></div>

Si vous souhaitez charger un composant entier à un endroit, utilisez DynamicComponentLoader:

https://angular.io/docs/ts/latest/api/core/DynamicComponentLoader-class.html