Angular 12：如何通过指令将组件注入指定div元素？

方案一：通过原生DOM查询定位目标容器（无需修改宿主组件） #

这种方法不需要改动现有组件代码，仅在指令内通过DOM查询找到appContainer元素，再将组件挂载到该元素内部。

修改指令代码： #

import { Directive, OnInit, OnDestroy, ComponentFactoryResolver, ViewContainerRef, ElementRef, Injector } from '@angular/core';
import { MyControlComponent } from './my-control.component';

@Directive({
  selector: "[my-controls]",
})
export class MyControlsDirective implements OnInit, OnDestroy {
  private componentRef: any;

  constructor(
    private factoryResolver: ComponentFactoryResolver,
    private viewContainerRef: ViewContainerRef,
    private elementRef: ElementRef,
    private injector: Injector
  ) {}

  ngOnInit() {
    // 查找目标容器：可根据模板中的id、class或模板引用变量属性定位
    // 示例用模板引用变量对应的DOM属性，也可替换为id="myApp"或专属class
    const appContainerEl = this.elementRef.nativeElement.querySelector('[ng-reflect-template-variable="appContainer"]');
    
    if (appContainerEl) {
      const componentFactory = this.factoryResolver.resolveComponentFactory(MyControlComponent);
      // 创建组件并指定宿主元素为appContainer
      this.componentRef = componentFactory.create(
        this.injector,
        [],
        appContainerEl
      );
      // 将组件加入Angular变更检测树
      this.viewContainerRef.insert(this.componentRef.hostView);
    }
  }

  ngOnDestroy() {
    // 销毁组件，避免内存泄漏
    if (this.componentRef) {
      this.componentRef.destroy();
    }
    this.viewContainerRef.clear();
  }
}

说明： #

• 利用ElementRef获取指令宿主元素的DOM节点，通过querySelector定位内部的appContainer元素，建议选择更稳定的标识（如专属class）替代模板引用变量属性。
• 通过ComponentFactory.create()指定组件的宿主元素，组件会直接渲染到目标div内部。
• 必须在ngOnDestroy中销毁组件，防止内存泄漏。

方案二：借助宿主组件的ViewChild（需少量修改宿主组件） #

如果指令的宿主是包含<ng-template #simpleApp>的组件，可以通过指令获取宿主组件实例，再利用组件内的ViewChild拿到appContainer的ViewContainerRef。

步骤1：修改宿主组件，添加ViewChild引用 #

// 宿主组件代码
import { Component, ViewChild, ViewContainerRef } from '@angular/core';

@Component({
  selector: 'app-host',
  templateUrl: './host.component.html'
})
export class HostComponent {
  // 获取appContainer的ViewContainerRef
  @ViewChild('appContainer', { read: ViewContainerRef, static: false }) appContainerVcRef!: ViewContainerRef;
}

步骤2：修改指令代码，获取宿主组件实例并创建组件 #

import { Directive, OnInit, OnDestroy, ComponentFactoryResolver, Host } from '@angular/core';
import { MyControlComponent } from './my-control.component';
import { HostComponent } from './host.component'; // 导入宿主组件类型

@Directive({
  selector: "[my-controls]",
})
export class MyControlsDirective implements OnInit, OnDestroy {
  private componentRef: any;

  constructor(
    private factoryResolver: ComponentFactoryResolver,
    @Host() private hostComponent: HostComponent // 注入宿主组件实例
  ) {}

  ngOnInit() {
    // 等待宿主组件ViewChild初始化，用setTimeout确保时机正确
    setTimeout(() => {
      if (this.hostComponent.appContainerVcRef) {
        this.componentRef = this.hostComponent.appContainerVcRef.createComponent(
          this.factoryResolver.resolveComponentFactory(MyControlComponent)
        );
      }
    }, 0);
  }

  ngOnDestroy() {
    if (this.componentRef) {
      this.componentRef.destroy();
    }
  }
}

说明： #

• 通过@Host()装饰器注入宿主组件实例，直接复用组件内已定义的ViewChild引用。
• 由于ViewChild在ngAfterViewInit阶段才初始化，用setTimeout确保能获取到有效引用，也可改用RxJS的异步流实现更优雅的时机控制。

两种方案都无需将指令改为输入属性，避免了破坏性变更，可根据实际场景选择：若不想修改宿主组件，优先选方案一；若宿主组件可控，方案二更符合Angular组件化规范。

内容的提问来源于stack exchange，提问作者David Gregor