如何在动态创建Angular组件时传递模板？

嘿，你已经搞定动态组件创建的基础部分了，接下来要给动态组件传递自定义模板对吧？这在Angular里其实有几种很实用的做法，我给你拆解一下：

方法一：通过@Input传递TemplateRef到动态组件 #

这是最直接的方式，核心思路是把模板引用作为输入属性传给动态组件，然后在动态组件内部渲染这个模板。

1. 改造你的动态组件（比如TestComponent） #

首先在动态组件里定义一个输入属性，用来接收外部传入的TemplateRef，然后用ngTemplateOutlet渲染它：

// test.component.ts
import { Component, Input, TemplateRef } from '@angular/core';

@Component({
  selector: 'app-test',
  template: `
    <div class="dynamic-component-content">
      <!-- 渲染传入的自定义模板 -->
      <ng-container [ngTemplateOutlet]="passedTemplate"></ng-container>
    </div>
  `
})
export class TestComponent {
  // 接收外部传递的模板引用
  @Input() passedTemplate!: TemplateRef<any>;
}

2. 在宿主组件（dynamic-detail）中传递模板 #

在宿主组件里，先获取要传递的模板引用，然后在创建动态组件实例时把模板赋值给它的输入属性：

// dynamic-detail.component.ts
import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver, OnInit } from '@angular/core';
import { TestComponent } from './test.component';

@Component({
  selector: 'dynamic-detail',
  template: `
    <div>
      <!-- 定义要传递给动态组件的模板 -->
      <ng-template #myCustomTemplate>
        <p>这是我要传给动态组件的自定义内容</p>
        <button (click)="handleTemplateClick()">模板里的按钮</button>
      </ng-template>
      <!-- 用来挂载动态组件的容器 -->
      <div #dynamicContainer></div>
    </div>
  `
})
export class DynamicDetailComponent implements OnInit {
  // 获取自定义模板的引用
  @ViewChild('myCustomTemplate', { static: true }) myCustomTemplate!: TemplateRef<any>;
  // 获取挂载动态组件的容器引用
  @ViewChild('dynamicContainer', { read: ViewContainerRef, static: true }) dynamicContainer!: ViewContainerRef;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) { }

  ngOnInit(): void {
    this.createDynamicComponent();
  }

  createDynamicComponent(): void {
    // 清空容器里已有的组件
    this.dynamicContainer.clear();
    // 创建TestComponent的组件工厂
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(TestComponent);
    // 在容器里创建组件实例
    const componentRef = this.dynamicContainer.createComponent(componentFactory);
    // 把模板引用传给动态组件的输入属性
    componentRef.instance.passedTemplate = this.myCustomTemplate;
  }

  handleTemplateClick(): void {
    console.log('模板里的按钮被点击啦');
  }
}

方法二：传递带上下文数据的模板 #

如果你的模板需要用到动态数据，可以结合ngTemplateOutletContext传递上下文，让模板能访问动态组件里的数据：

1. 给动态组件添加上下文数据 #

// test.component.ts
export class TestComponent {
  @Input() passedTemplate!: TemplateRef<any>;
  // 定义模板需要用到的上下文数据
  templateContext = {
    $implicit: '默认隐含数据',
    userName: '小明',
    userAge: 25
  };
}

2. 在动态组件模板里传递上下文 #

<!-- test.component.html -->
<ng-container 
  [ngTemplateOutlet]="passedTemplate" 
  [ngTemplateOutletContext]="templateContext"
></ng-container>

3. 在宿主组件的模板里接收上下文数据 #

<!-- dynamic-detail.component.html -->
<ng-template #myCustomTemplate let-defaultData let-name="userName" let-age="userAge">
  <p>默认数据：{{ defaultData }}</p>
  <p>用户名：{{ name }}</p>
  <p>年龄：{{ age }}</p>
</ng-template>

方法三：从外部父组件传递模板到宿主组件 #

如果你的dynamic-detail组件本身是被其他父组件调用的，还可以让父组件直接把模板传给dynamic-detail，再由它转发给动态组件：

1. 在dynamic-detail里添加输入属性接收模板 #

// dynamic-detail.component.ts
@Component({
  selector: 'dynamic-detail',
  template: `<div #dynamicContainer></div>`
})
export class DynamicDetailComponent implements OnInit {
  // 接收父组件传递的模板
  @Input() externalTemplate!: TemplateRef<any>;
  // ... 其他代码

  createDynamicComponent(): void {
    // ... 创建组件实例
    componentRef.instance.passedTemplate = this.externalTemplate;
  }
}

2. 在父组件中使用dynamic-detail并传入模板 #

<!-- parent.component.html -->
<dynamic-detail [externalTemplate]="parentTemplate"></dynamic-detail>

<ng-template #parentTemplate>
  <h2>来自父组件的自定义模板</h2>
  <p>这是父组件定义的内容，直接传给了动态组件</p>
</ng-template>

注意事项 #

• 确保ViewChild的static属性设置正确：如果要在ngOnInit里获取引用，设置static: true；如果要在视图初始化后获取（比如依赖DOM渲染的元素），设置static: false。
• 如果使用Angular 9+，可以用ComponentFactoryResolver的替代方案ViewContainerRef.createComponent直接传入组件类，无需手动创建工厂：

const componentRef = this.dynamicContainer.createComponent(TestComponent);

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