在Angular中替换$ compile

Question

我正在尝试在Angular 4中编译一些HTML内容，这可以通过Angular 1中的$ compile来完成。

我尝试了一些Angular 2的建议替代品，这些替代品也已被弃用。

有人建议我做最好的方法。

Answer 1

Angular中$compiler服务的替换为Compiler。你可以像这样注入它：

class MyComponent {
     constructor(compiler: Compiler) {}

阅读文章Here is what you need to know about dynamic components in Angular以了解如何使用它来动态编译组件。

以下是文章中的一个例子：

ngAfterViewInit() {
  const template = '<span>generated on the fly: {{name}}</span>';

  const tmpCmp = Component({template: template})(class {
  });
  const tmpModule = NgModule({declarations: [tmpCmp]})(class {
  });

  this._compiler.compileModuleAndAllComponentsAsync(tmpModule)
    .then((factories) => {
      const f = factories.componentFactories[0];
      const cmpRef = this.vc.createComponent(tmpCmp);
      cmpRef.instance.name = 'dynamic';
    })
}