Question

我希望通过服务调用服务器接收HTML数据（这是肯定的。我不能在本地保存模板）并在内部操作它们如何显示它（作为模态或整页）。带有Angular标记的HTML应该循环到一个组件并一起工作。在Angular JS中大多数是$ compile。

我正在开发Angular 5中的解决方案，并且应该与AOT编译器兼容。我已经提到了几个解决方案，并且对已弃用和更新的解决方案感到困惑。请帮我。我相信你的最新答案也可以帮助很多其他人..提前谢谢你！

Answer 1

为了动态呈现HTML，您需要DomSanitizer。例如。像这样的东西：

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

现在，这就是它的要点。你显然还需要一个加载机制。您可能还想在此块中包含一些数据 - 如果它是简单数据，则可以即时运行：

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

对于更复杂的方案，您可能需要创建动态组件。

编辑：动态解析的组件示例。有了这个，您可以从服务器发送的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();
    }
  }
}

Answer 2

这是使用eval使用动态模板和动态组件类代码的扩展解决方案。请参见下面的无评估变量。

Stackblitz Example，无需使用评估。

import { Component, ViewChild, ViewContainerRef, NgModule, Compiler, Injector, NgModuleRef } from '@angular/core';
import {CommonModule} from "@angular/common";
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: [CommonModule, 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>`)
    }
}

这里是一个很小的变化，没有动态类代码。通过类绑定动态模板变量无法解决，而是使用了一个函数：

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

Answer 3

检出npm软件包Ngx-Dynamic-Compiler

此软件包使您可以使用* ngIf，* ngFor之类的角度指令，通过字符串插值进行数据绑定，并在运行时创建真正的动态组件。已提供AOT支持。

Answer 4

通过https://www.npmjs.com/package/@codehint-ng/html-compiler对此包进行检查，或者查看源代码以了解如何将带有已配对JS对象以及数据和事件的HTML字符串编译。

在Angular 4中编译动态HTML，类似于Angular JS中的$ compile

4 个答案: