4

我在运行时创建 Angular 代码，特别是，我使用 SVG 库来创建包含 Angular 代码指令的矢量图形，(click)='myMethod()'这些指令反过来又调用我在 SVG 封闭组件中静态定义的方法。在运行时生成，我需要编译创建的模板并将其添加到组件中。我当时在这篇非常麻烦的帖子的帮助下使用 Angular 3 实现了这样的代码。我尝试在 Angular 8 应用程序中复制旧代码：

private addComponent(template: string) {

    @Component({template: template + ' <div #target></div>'})
    class TemplateComponent {

      @ViewChild('target', {static: false, read: ViewContainerRef}) public target;

      constructor() {
      }

      public myMethod() {
        // do something     
      }
    }

    @NgModule({declarations: [TemplateComponent]})
    class TemplateModule {
      @ViewChild('target', {static: false, read: ViewContainerRef}) public target;
    }

    // ERROR in next line:
    const mod = this.compiler.compileModuleAndAllComponentsSync(TemplateModule);
    const factory = mod.componentFactories.find((comp) =>
        comp.componentType === TemplateComponent
    );
    this.container.createComponent(factory);
}

现在失败了

ERROR 错误：在 Compiler._throwError (core.js:38932) 处未加载运行时编译器

一方面，我不知道为什么会发生该错误。我在互联网上找到的所有内容都是关于延迟模块加载中的关键函数语法。另一方面，我想知道，如果以后有五个 Angular 主要版本，还有其他方法可以做到这一点。我读过关于Portals的文章，但它似乎是关于动态加载静态模板，而不是动态生成的未编译模板。期待有人指出我正确的方向。

Post Scriptum：为可以在 AoT 模式下提供针对 Angular v9 的基本运行代码片段的人添加一个赏金。它必须包含一个运行时编译的模板（例如，来自一个字符串变量），该模板包含相关组件中的方法调用。

4

1 回答 1

8

JIT 编译器现在默认从 AOT 包中排除，因此您必须手动包含它。您需要安装该软件包@angular/platform-browser-dynamic并将Compiler提供程序添加到您的应用程序模块中。例如：

import { NgModule, COMPILER_OPTIONS, CompilerFactory, Compiler } from '@angular/core';
import { JitCompilerFactory } from '@angular/platform-browser-dynamic';

@NgModule({
  providers: [
    { provide: COMPILER_OPTIONS, useValue: {}, multi: true },
    { provide: CompilerFactory, useClass: JitCompilerFactory, deps: [COMPILER_OPTIONS] },
    { provide: Compiler, useFactory: createCompiler, deps: [CompilerFactory] }
  ]
})
export class AppModule { }

export function createCompiler(compilerFactory: CompilerFactory) {
  return compilerFactory.createCompiler();
}

然后，您还必须对代码进行一些小的更改，因为您无法使用@Component装饰器将模板设置为变量，这会导致编译错误。装饰器必须在代码中动态运行。

这是您的方法更新了更改：

private addComponent(template: string) {
  class TemplateComponent {

    @ViewChild('target', {static: false, read: ViewContainerRef}) public target;

    constructor() {
    }

    public myMethod() {
      // do something     
    }
  }

  class TemplateModule {
    @ViewChild('target', {static: false, read: ViewContainerRef}) public target;
  }

  const componentType = Component({template: template + '<div #target></div>'})(TemplateComponent)

  const componentModuleType = NgModule({declarations: [componentType]})(TemplateModule)

  const mod = this.compiler.compileModuleAndAllComponentsSync(componentModuleType);
  const factory = mod.componentFactories.find((comp) =>
      comp.componentType === componentType
  );
  this.container.createComponent(factory);
}

我还创建了一个StackBlitz 示例，您可以在其中看到它的工作原理。

有关如何执行此操作的更详细示例，请查看包含完整示例的Angular AOT 动态组件 GitHub 存储库。

我在关于动态加载组件模板的 Angular GitHub 问题中发现了这一点。既然您使用它，您可能会很好地关注这个问题以了解最新的发展。

于 2020-05-17T22:32:50.863 回答