如何在Angular中动态添加ng-template？现有方案仅渲染H1标签

嘿，我懂你碰到的问题了——用[innerHTML]确实搞不定Angular的模板语法，因为Angular的编译器根本不会处理通过这种方式插入的HTML内容，它只会渲染纯HTML，所以ng-template和插值表达式{{heading}}都不会被解析出来。ng-template本身是Angular的模板占位符，需要经过编译器处理才能生效，而[innerHTML]完全绕开了这个过程，自然只渲染了<h1>标签。

下面给你两种可行的解决方案，推荐第一种，更符合Angular的最佳实践：

方案1：使用动态组件（推荐） #

这种方法是把你需要的模板内容封装成一个独立的组件，然后动态加载它，这样Angular会正常编译模板里的所有语法：

步骤1：创建动态组件 #

新建一个dynamic-else.component.ts文件，把你的模板内容写进去：

import { Component, Input } from '@angular/core';

@Component({
  template: `
    <ng-template #elseblock *ngIf="var">
      <h1> {{ heading }} </h1>
    </ng-template>
  `
})
export class DynamicElseComponent {
  @Input() var: boolean; // 接收外部传入的条件变量
  @Input() heading: string; // 接收外部传入的标题内容
}

步骤2：在AppComponent中动态加载组件 #

修改app.component.ts，用ViewContainerRef来加载刚才创建的动态组件：

import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver, OnInit } from '@angular/core';
import { DynamicElseComponent } from './dynamic-else.component';

@Component({
  selector: 'app-root',
  template: `
    <!-- 用来承载动态组件的容器 -->
    <div #dynamicContainer></div>
  `
})
export class AppComponent implements OnInit {
  // 获取容器的ViewContainerRef实例
  @ViewChild('dynamicContainer', { read: ViewContainerRef }) dynamicContainer!: ViewContainerRef;

  constructor(private resolver: ComponentFactoryResolver) {}

  ngOnInit() {
    // 1. 创建组件工厂
    const componentFactory = this.resolver.resolveComponentFactory(DynamicElseComponent);
    // 2. 在容器中创建组件实例
    const componentRef = this.dynamicContainer.createComponent(componentFactory);
    // 3. 给组件传递输入属性
    componentRef.instance.var = true; // 设置你的条件变量值
    componentRef.instance.heading = 'Hello Dynamic Template!'; // 设置标题内容
  }
}

步骤3：在模块中声明动态组件 #

修改app.module.ts，把动态组件添加到declarations数组里（Angular 9+之后不需要entryComponents，但旧版本可能需要加上）：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { DynamicElseComponent } from './dynamic-else.component';

@NgModule({
  declarations: [
    AppComponent,
    DynamicElseComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  // Angular 9+可选，旧版本需要添加
  entryComponents: [DynamicElseComponent]
})
export class AppModule { }

方案2：动态编译模板（适合完全动态的场景） #

如果你的模板内容是完全动态生成的字符串（比如从后端获取），可以用Angular的Compiler来动态编译模板，但需要开启JIT编译：

步骤1：配置JIT编译（Angular 9+） #

在tsconfig.json的angularCompilerOptions中添加配置：

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

步骤2：在AppComponent中动态编译并加载模板 #

修改app.component.ts：

import { Component, ViewChild, ViewContainerRef, Compiler, NgModule, OnInit } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  template: `
    <div #compiledContainer></div>
  `
})
export class AppComponent implements OnInit {
  @ViewChild('compiledContainer', { read: ViewContainerRef }) compiledContainer!: ViewContainerRef;

  constructor(private compiler: Compiler) {}

  ngOnInit() {
    // 你的动态模板字符串
    const dynamicTemplate = `<ng-template #elseblock *ngIf="var"> <h1> {{ heading }} </h1> </ng-template>`;

    // 1. 创建动态组件
    const DynamicComp = Component({ template: dynamicTemplate })(class {});
    // 2. 创建动态模块
    const DynamicModule = NgModule({
      imports: [BrowserModule],
      declarations: [DynamicComp]
    })(class {});

    // 3. 编译模块并加载组件
    this.compiler.compileModuleAndAllComponentsAsync(DynamicModule)
      .then(moduleFactory => {
        const compFactory = moduleFactory.componentFactories.find(f => f.componentType === DynamicComp);
        const compRef = this.compiledContainer.createComponent(compFactory);
        // 设置组件输入属性
        compRef.instance.var = true;
        compRef.instance.heading = 'Hello Compiled Dynamic Template!';
      });
  }
}

为什么原来的方法不行？ #

你之前用[innerHTML]的方式之所以只渲染了<h1>标签，是因为Angular的innerHTML属性只会把传入的字符串当作纯HTML处理，不会经过Angular的模板编译器。也就是说，ng-template、*ngIf以及插值表达式{{heading}}这些Angular特有的语法，Angular不会去解析它们，只会把它们当作普通的HTML标签或文本：ng-template本身是Angular的占位符，不会在DOM中渲染，所以直接被忽略；<h1>标签会被渲染，但里面的{{heading}}只会显示成文本，不会被替换成变量值。

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