Compiler le code HTML dynamique Angulaire 4/5 - quelque chose de similaire à $compiler en Angular JS

Pour le rendu HTML à la volée, vous devez DomSanitizer. E. g. quelque chose comme ceci:

<!-- 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. Manifestement, vous aussi besoin d'un chargement mécanique. Vous pouvez également inclure des données dans ce bloc - si c'est simple de données, il peut être à la volée:

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

Pour des scénarios plus complexes, vous pourriez avoir besoin pour créer un composant dynamique.

Edit: un exemple d'un composant résolu dynamiquement. Avec cela, vous créez un composant à la volée à partir du serveur-envoyé html.

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

Extraire le package npm Ngx-Dynamique-Compilateur

Ce package vous permet d'utiliser angulaire directives comme *ngIf,*ngFor , la liaison de données à l'aide de la chaîne d'interpolation et crée une véritable dynamique composant à l'exécution. AOT un appui a été fourni.