Angular14动态字符串模板组件无法使用ngIf等指令求助

1. 启用JIT编译支持 #

Angular 14默认采用AOT编译，而动态字符串模板的编译依赖JIT模式，需修改项目配置：

• 打开angular.json，找到对应项目的build配置，将aot设置为false：

"projects": {
  "your-project-name": {
    "architect": {
      "build": {
        "options": {
          "aot": false,
          // 其他原有配置...
        }
      }
    }
  }
}

• 调整tsconfig.json的angularCompilerOptions，避免严格模板检查阻碍动态编译：

"angularCompilerOptions": {
  "strictTemplates": false,
  "enableIvy": true
}

2. 修正动态组件与模块创建逻辑 #

虽然你已导入CommonModule和FormsModule，但需确保临时模块的配置被正确编译，可调整代码如下：

import { Component, NgModule, Injector, Compiler, ModuleWithComponentFactories } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

// 动态组件创建方法
createDynamicComponent(j: number, myTemplate: string, data: any) {
  // 定义临时组件类
  const tmpCmp = Component({
    template: myTemplate
  })(class {
    name!: string;
    data!: any;
  });

  // 定义临时模块，确保导入依赖模块
  const tmpModule = NgModule({
    declarations: [tmpCmp],
    imports: [CommonModule, FormsModule]
  })(class { });

  // 编译模块并获取组件工厂
  const mod: ModuleWithComponentFactories<any> = this._compiler.compileModuleAndAllComponentsSync(tmpModule);
  const factory = mod.componentFactories.find(comp => comp.componentType === tmpCmp);

  if (factory) {
    const cmpRef = factory.create(this._injector, [], null, this._m);
    cmpRef.instance.name = `dynamic_${j}`;
    cmpRef.instance.data = data;
    // 手动触发变更检测确保视图更新
    cmpRef.changeDetectorRef.detectChanges();
    this.listVc.get(j)?.insert(cmpRef.hostView);
  }
}

3. 验证模板指令语法 #

确保模板中指令写法符合Angular规范：

• *ngIf作为结构型指令，依赖CommonModule，你的模板写法<span *ngIf="data.teletrav">是正确的
• 若要使用ngModel，需改为双向绑定语法[(ngModel)]="data.lastName"，同时确保FormsModule已导入临时模块

额外注意 #

• Ivy编译器（Angular 14默认）下动态编译的逻辑与旧版View Engine有差异，确保使用14.x稳定版的@angular/core
• 生产环境中尽量避免大量使用动态字符串模板编译，JIT模式会增加打包体积与运行时开销，优先考虑预编译组件或官方动态组件加载方案

内容的提问来源于stack exchange，提问作者BaaLa