我在运行时创建 Angular 代码,特别是,我使用 SVG 库来创建包含 Angular 代码指令的矢量图形,如 (click)='myMethod()'
,然后调用我在 SVG 封闭组件中静态定义的方法。在运行时生成,我需要编译创建的模板并将其添加到组件中。我当时在 this post 的帮助下使用 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 Error: Runtime compiler is not loaded at Compiler._throwError (core.js:38932)
一方面,我不知道为什么会发生该错误。我在互联网上找到的所有内容都是关于 critical function syntax在延迟模块加载中。另一方面,我想知道,如果以后有五个 Angular 主要版本,还有其他方法可以做到这一点。我读到了Portals但它似乎是关于动态加载静态模板,而不是动态生成的未编译模板。期待有人指出我正确的方向。
后文:为可以在 AoT 模式下提供针对 Angular v9 的基本运行代码片段的人添加一个赏金。它必须包含一个运行时编译的模板(例如,来自字符串变量),其中包含关联组件中的方法调用。
最佳答案
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 sample你可以看到它在哪里工作。
有关如何执行此操作的更详细示例,请查看 Angular AOT Dynamic Components GitHub repository有一个完整的样本。
我在 Angular GitHub issue about dynamically loading component templates 中找到了这个.由于您使用它,因此您可能会很好地关注该问题以了解最新的发展。
关于angular - 如何编译运行时生成的 Angular8 代码?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61137899/