Angular 5动态模块递归指令（无循环依赖）及动态模板加载问询

我之前在Angular 5项目里折腾过动态模板加载的需求，踩过不少坑，结合你提到的场景，给你整理几个核心的解决方案方向，应该能覆盖你遇到的问题：

• 先搞定动态编译的基础配置
  Angular 5默认的AOT编译会限制动态模板的编译能力，所以首先得调整项目配置并做好基础代码的搭建：

  1. 确保在组件中注入Compiler服务，用来动态编译模板和模块；
  2. 动态创建的模块要添加NO_ERRORS_SCHEMA，避免模板中出现未知组件/指令时直接报错；
  3. 核心代码示例：

     import { Compiler, Component, NgModule, NO_ERRORS_SCHEMA, ViewChild, ViewContainerRef } from '@angular/core';
     
     @Component({
       selector: 'app-dynamic-host',
       template: `<div #templateContainer></div>`
     })
     export class DynamicHostComponent {
       @ViewChild('templateContainer', { read: ViewContainerRef }) container: ViewContainerRef;
       private componentRef: any;
     
       constructor(private compiler: Compiler) {}
     
       renderDynamicTemplate(template: string, contextData: any) {
         // 先清理之前的组件，避免内存泄漏
         if (this.componentRef) {
           this.componentRef.destroy();
           this.container.clear();
         }
     
         // 创建动态组件
         const DynamicComponent = Component({ template })(class {});
         // 创建动态模块
         const DynamicModule = NgModule({
           declarations: [DynamicComponent],
           schemas: [NO_ERRORS_SCHEMA]
         })(class {});
     
         // 编译并渲染
         this.compiler.compileModuleAndAllComponentsAsync(DynamicModule)
           .then(moduleFactory => {
             const compFactory = moduleFactory.componentFactories.find(f => f.componentType === DynamicComponent);
             this.componentRef = this.container.createComponent(compFactory);
             // 绑定上下文数据
             Object.assign(this.componentRef.instance, contextData);
             // 手动触发变更检测
             this.componentRef.changeDetectorRef.detectChanges();
           });
       }
     }
     

• 处理模板中的依赖项
  如果你的动态模板里用到了自定义管道、组件或者第三方指令，不能只靠NO_ERRORS_SCHEMA跳过检查，必须把这些依赖注册到动态模块里：

  • 自定义管道/组件：加到动态模块的declarations数组；
  • 共享模块中的依赖：把共享模块导入到动态模块的imports数组；
    比如你有一个DateFormatPipe，动态模块就要改成：

  const DynamicModule = NgModule({
    declarations: [DynamicComponent, DateFormatPipe],
    imports: [SharedModule], // 如果管道在SharedModule里
    schemas: [NO_ERRORS_SCHEMA]
  })(class {});
  

• 避免内存泄漏
  动态组件不会自动销毁，一定要在合适的时机清理：

  • 在组件销毁时（ngOnDestroy）调用this.container.clear()和this.componentRef.destroy()；
  • 每次渲染新模板前，先清理旧的组件实例和视图容器。

• 解决数据绑定与变更检测问题
  动态组件的变更检测默认是手动模式，所以：

  • 更新上下文数据后，要调用this.componentRef.changeDetectorRef.detectChanges()来刷新视图；
  • 如果需要双向绑定，确保模板里的[(ngModel)]语法正确，且动态组件所在的模块导入了FormsModule（加到动态模块的imports里）。

• 排查编译报错
  遇到模板编译失败时，可以从这几点排查：

  • 检查模板语法是否符合Angular 5的要求（比如不要用Angular 6+的新语法）；
  • 确认所有用到的组件/指令都已注册到动态模块；
  • 检查tsconfig.json里的angularCompilerOptions是否没有限制动态编译（比如"strictTemplates": false）。

内容的提问来源于stack exchange，提问作者Bjr. Jean