如何在Angular运行时渲染含管道与指令的动态模板？

你的问题核心在于[innerHtml]仅能渲染原生HTML内容，完全不会处理Angular特有的语法（比如*ngFor指令、{{}}插值表达式、titlecase管道）——这些语法必须经过Angular编译器的编译流程才能生效。下面是可落地的实现方案：

1. 实现动态模板编译服务 #

创建一个服务来处理模板字符串的编译，生成可渲染的Angular组件：

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

@Injectable({ providedIn: 'root' })
export class DynamicTemplateService {
  constructor(private compiler: Compiler, private injector: Injector) {}

  compileTemplate(template: string, context: any) {
    // 定义动态组件
    const DynamicComponent = Component({ template })(class {});

    // 定义动态模块，导入依赖模块（CommonModule提供*ngFor、titlecase等基础功能）
    const DynamicModule = NgModule({
      imports: [CommonModule],
      declarations: [DynamicComponent]
    })(class {});

    // 同步编译模块与组件
    const moduleFactory = this.compiler.compileModuleSync(DynamicModule);
    const componentFactory = moduleFactory.componentFactoryResolver.resolveComponentFactory(DynamicComponent);

    // 创建组件实例并注入上下文数据
    const componentRef = componentFactory.create(this.injector);
    Object.assign(componentRef.instance, context);
    
    return componentRef;
  }
}

2. 修改DynamicTemplateComponent #

替换[innerHtml]的实现，改为通过编译服务渲染动态模板：

import { Component, Input, ViewContainerRef, OnInit } from '@angular/core';
import { DynamicTemplateService } from './dynamic-template.service';

@Component({
  selector: 'app-dynamic-template',
  template: `<div #container></div>`,
})
export class DynamicTemplateComponent implements OnInit {
  @Input() template: string;
  @Input() items: any[];

  constructor(
    private viewContainerRef: ViewContainerRef,
    private dynamicTemplateService: DynamicTemplateService
  ) {}

  ngOnInit() {
    // 清空容器原有内容
    this.viewContainerRef.clear();
    // 编译模板并创建组件，传入数据上下文
    const componentRef = this.dynamicTemplateService.compileTemplate(this.template, { items: this.items });
    // 将动态组件插入容器
    this.viewContainerRef.insert(componentRef.hostView);
  }
}

3. 调整LandingPageComponent #

原代码逻辑基本保留，确保模板和数据正确传入即可：

import { Component, ViewChild, ViewContainerRef, AfterViewInit } from '@angular/core';
import { DynamicTemplateComponent } from './dynamic-template.component';

@Component({
  selector: 'app-landing-page',
  template: `<div #dynamicComponentContainer></div>`,
})
export class LandingPageComponent implements AfterViewInit {
  @ViewChild('dynamicComponentContainer', { read: ViewContainerRef, static: true })
  container: ViewContainerRef;

  ngAfterViewInit() {
    const componentRef = this.container.createComponent(DynamicTemplateComponent);
    componentRef.instance.items = [{ name: 'foo' }, { name: 'bar' }, { name: 'baz' }];
    componentRef.instance.template = `<ul>
      <li *ngFor="let item of items">
        {{ item.name | titlecase }}
      </li>
    </ul>`;
  }
}

关键注意事项 #

• JIT编译配置：Angular生产环境默认用AOT编译，动态模板需要启用JIT。在main.ts中改用动态引导方式：

  import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  import { AppModule } from './app/app.module';
  
  platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.error(err));
  

• 安全风险：如果模板来自不可信的服务器，必须做内容校验，避免XSS攻击。
• 性能优化：频繁编译动态组件会有性能开销，建议对编译后的组件工厂做缓存。

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