Angular 5中如何在其他组件中动态插入模板引用？

嘿，我来帮你解决这个问题！首先得纠正一个小误区：你原来写的<ng-content #target>是用来做内容投影的，没法直接作为动态插入模板的目标容器，咱们得用ViewContainerRef来承载动态模板。下面是一步步的具体实现：

第一步：在OtherComponent里暴露你的模板 #

先在other.component.html里定义好模板，然后在组件类里用@ViewChild拿到这个模板的TemplateRef，之后可以通过输出事件把它传递出去（方便父组件中转）：

<!-- other.component.html -->
<ng-template #source>
  <div>这是来自OtherComponent的模板内容~</div>
</ng-template>

// other.component.ts
import { Component, ViewChild, TemplateRef, Output, EventEmitter, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-other',
  templateUrl: './other.component.html'
})
export class OtherComponent implements AfterViewInit {
  // 获取模板引用
  @ViewChild('source') sourceTemplate!: TemplateRef<any>;

  // 用输出事件把模板传给父组件
  @Output() templateReady = new EventEmitter<TemplateRef<any>>();

  ngAfterViewInit() {
    // 视图初始化完成后再传递模板，避免引用为空
    this.templateReady.emit(this.sourceTemplate);
  }
}

第二步：改造TargetComponent，准备模板插入容器 #

把原来的ng-content换成ng-container，然后在组件类里获取它的ViewContainerRef，这就是咱们插入模板的目标位置：

<!-- target.component.html -->
<!-- 用ng-container作为模板插入的容器，它不会生成额外DOM节点 -->
<ng-container #targetContainer></ng-container>

// target.component.ts
import { Component, ViewChild, ViewContainerRef, Input, OnInit } from '@angular/core';
import { TemplateRef } from '@angular/core';

@Component({
  selector: 'app-target',
  templateUrl: './target.component.html'
})
export class TargetComponent implements OnInit {
  // 接收外部传入的模板
  @Input() incomingTemplate!: TemplateRef<any>;

  // 获取容器的ViewContainerRef
  @ViewChild('targetContainer', { read: ViewContainerRef }) targetContainer!: ViewContainerRef;

  ngOnInit() {
    if (this.incomingTemplate) {
      // 先清空容器（可选，避免重复插入），再插入模板
      this.targetContainer.clear();
      this.targetContainer.createEmbeddedView(this.incomingTemplate);
    }
  }
}

第三步：通过父组件中转传递模板 #

如果OtherComponent和TargetComponent在同一个父组件下，父组件就可以当中间桥梁，把OtherComponent的模板传给TargetComponent：

<!-- parent.component.html -->
<app-other (templateReady)="onTemplateReceived($event)"></app-other>
<app-target [incomingTemplate]="selectedTemplate"></app-target>

// parent.component.ts
import { Component } from '@angular/core';
import { TemplateRef } from '@angular/core';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent {
  selectedTemplate!: TemplateRef<any>;

  onTemplateReceived(template: TemplateRef<any>) {
    this.selectedTemplate = template;
  }
}

额外小技巧：给模板传递数据 #

如果需要给插入的模板传数据，可以在createEmbeddedView的第二个参数里传入上下文对象，比如：

// 在TargetComponent的ngOnInit里
this.targetContainer.createEmbeddedView(this.incomingTemplate, { 
  $implicit: '默认传递的数据',
  customData: '自定义字段数据'
});

然后在模板里就能这样用：

<!-- other.component.html里的模板 -->
<ng-template #source let-defaultData let-custom="customData">
  <div>默认数据：{{defaultData}}</div>
  <div>自定义数据：{{custom}}</div>
</ng-template>

注意点提醒 #

• 一定要在ngAfterViewInit（获取模板）或ngOnInit（插入模板）这类生命周期钩子中操作，因为此时模板和容器的引用才会被正确初始化。
• 如果不需要保留容器原有内容，记得调用clear()方法，避免重复插入模板导致DOM冗余。

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