web-dev-qa-db-fra.com

Compiler HTML dynamique dans Angular 4/5- quelque chose de similaire à $ compile dans Angular JS

Je souhaitais recevoir des données HTML via un appel de service au serveur (cela ne fait aucun doute. Je ne peux pas conserver les modèles en local) et les manipuler en interne pour savoir comment les afficher (sous forme de page modale ou complète). Ce code HTML avec les balises angulaires doit être associé à un composant et fonctionner ensemble. Au plus genre de $ compiler en Angular JS.

Je développe la solution dans Angular 5 et devrait être compatible avec le compilateur AOT. J'avais évoqué plusieurs solutions et abouti à confusion sur les solutions obsolètes et mises à jour. Aidez-moi, s'il vous plaît. Je pense que votre réponse mise à jour aiderait également beaucoup d'autres personnes. Merci beaucoup d'avance!

angularcompilationangular5
9
Srini

Pour rendre le code HTML à la volée, vous avez besoin de DomSanitizer. Par exemple. quelque chose comme ça:

<!-- template -->
<div [innerHTML]="htmlData"></div>

// component
import { Component } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  htmlData: any;
  constructor(private sanitizer: DomSanitizer) {}

  ngOnInit() {
    this.htmlData= this.sanitizer.bypassSecurityTrustHtml('<div style="border: 1px solid red;"><h2>Safe Html</h2><span class="user-content">Server prepared this html block.</span></div>');
  }
}

Maintenant, c'est l'essentiel. Vous avez évidemment aussi besoin d'un mécanicien de chargement. Vous voudrez peut-être aussi inclure des données dans ce bloc - s'il s'agit de données simples, elles peuvent être effectuées à la volée:

this.htmlData = this.sanitizer.bypassSecurityTrustHtml(`<div>${this.someValue}</div>`);

Pour des scénarios plus complexes, vous devrez peut-être créer un composant dynamique. 

Edit: un exemple de composant résolu dynamiquement. Avec cela, vous créez un composant à la volée à partir du code HTML envoyé par le serveur.

@Component({
  selector: 'my-component',
  template: `<h2>Stuff bellow will get dynamically created and injected<h2>
          <div #vc></div>`
})
export class TaggedDescComponent {
  @ViewChild('vc', {read: ViewContainerRef}) vc: ViewContainerRef;

  private cmpRef: ComponentRef<any>;

  constructor(private compiler: Compiler,
              private injector: Injector,
              private moduleRef: NgModuleRef<any>,
              private backendService: backendService,
              ) {}

  ngAfterViewInit() {
    // Here, get your HTML from backend.
    this.backendService.getHTMLFromServer()
        .subscribe(rawHTML => this.createComponentFromRaw(rawHTML));
  }

  // Here we create the component.
  private createComponentFromRaw(template: string) {
    // Let's say your template looks like `<h2><some-component [data]="data"></some-component>`
    // As you see, it has an (existing) angular component `some-component` and it injects it [data]

    // Now we create a new component. It has that template, and we can even give it data.
    const tmpCmp = Component({ template, styles })(class {
      // the class is anonymous. But it's a quite regular angular class. You could add @Inputs,
      // @Outputs, inject stuff etc.
      data: { some: 'data'};
      ngOnInit() { /* do stuff here in the dynamic component */}
    });

    // Now, also create a dynamic module.
    const tmpModule = NgModule({
      imports: [RouterModule],
      declarations: [tmpCmp],
      // providers: [] - e.g. if your dynamic component needs any service, provide it here.
    })(class {});

    // Now compile this module and component, and inject it into that #vc in your current component template.
    this.compiler.compileModuleAndAllComponentsAsync(tmpModule)
      .then((factories) => {
        const f = factories.componentFactories[0];
        this.cmpRef = f.create(this.injector, [], null, this.moduleRef);
        this.cmpRef.instance.name = 'my-dynamic-component';
        this.vc.insert(this.cmpRef.hostView);
      });
  }

  // Cleanup properly. You can add more cleanup-related stuff here.
  ngOnDestroy() {
    if(this.cmpRef) {
      this.cmpRef.destroy();
    }
  }
}
16
Zlatko

Voici une solution étendue avec un modèle dynamique et un code de classe de composant dynamique utilisant eval. Voir ci-dessous pour une variation sans eval.

Basé sur Zlatko s réponse, merci!

import { Component, ViewChild, ViewContainerRef, NgModule, Compiler, Injector, NgModuleRef } from '@angular/core';
import { RouterModule } from "@angular/router"

@Component({
    selector: 'app-root',
    template: `<div style="text-align:center">
    <h1>
    Welcome to {{ title }}!
    </h1>
</div>
<div #content></div>`
})
export class AppComponent {

    title = 'Angular';

    @ViewChild("content", { read: ViewContainerRef })
    content: ViewContainerRef;

    constructor(private compiler: Compiler,
    private injector: Injector,
    private moduleRef: NgModuleRef<any>, ) {
    }

    // Here we create the component.
    private createComponentFromRaw(klass: string, template: string, styles = null) {
    // Let's say your template looks like `<h2><some-component [data]="data"></some-component>`
    // As you see, it has an (existing) angular component `some-component` and it injects it [data]

    // Now we create a new component. It has that template, and we can even give it data.
    var c = null;
    eval(`c = ${klass}`);
    let tmpCmp = Component({ template, styles })(c);

    // Now, also create a dynamic module.
    const tmpModule = NgModule({
        imports: [RouterModule],
        declarations: [tmpCmp],
        // providers: [] - e.g. if your dynamic component needs any service, provide it here.
    })(class { });

    // Now compile this module and component, and inject it into that #vc in your current component template.
    this.compiler.compileModuleAndAllComponentsAsync(tmpModule)
        .then((factories) => {
        const f = factories.componentFactories[factories.componentFactories.length - 1];
        var cmpRef = f.create(this.injector, [], undefined, this.moduleRef);
        cmpRef.instance.name = 'app-dynamic';
        this.content.insert(cmpRef.hostView);
        });
    }

    ngAfterViewInit() {
    this.createComponentFromRaw(`class _ {
        constructor(){
        this.data = {some: 'data'};
        }
        ngOnInit() { }
        ngAfterViewInit(){}
        clickMe(){ alert("Hello eval");}
        }`, `<button (click)="clickMe()">Click Me</button>`)
    }
}

Voici une petite variante sans code de classe dynamique. La liaison des variables de modèle dynamique via la classe n'a pas fonctionné, mais une fonction a été utilisée:

function A() {
    this.data = { some: 'data' };
    this.clickMe = () => { alert("Hello tmpCmp2"); }
}
let tmpCmp2 = Component({ template, styles })(new A().constructor);
1
Moslem Shahsavan