Angular技术问题：能否用*my-dir结构指令将宿主元素包裹进不可修改的my-comp组件？

完全可以实现这个需求，不需要修改目标组件my-comp的代码，通过自定义结构指令就能完成宿主元素的包裹逻辑。

实现思路 #

结构指令的核心是操作视图容器与模板引用：

• 借助ViewContainerRef创建目标组件my-comp的实例
• 将原宿主元素对应的模板内容，插入到my-comp的内容投影区域
• 用新创建的my-comp实例替换原宿主元素的位置

指令代码实现 #

import { Directive, TemplateRef, ViewContainerRef, OnInit } from '@angular/core';
import { MyCompComponent } from './my-comp.component';

@Directive({
  selector: '[my-dir]'
})
export class MyDirDirective implements OnInit {
  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainerRef: ViewContainerRef
  ) {}

  ngOnInit(): void {
    // Angular 13+ 可直接通过createComponent创建组件实例
    const componentRef = this.viewContainerRef.createComponent(MyCompComponent);
    
    // 将原宿主元素的模板内容插入到my-comp的内部视图容器
    const compViewContainer = componentRef.injector.get(ViewContainerRef);
    compViewContainer.createEmbeddedView(this.templateRef);
  }
}

注：如果你的Angular版本低于13，需要引入ComponentFactoryResolver来创建组件工厂，再通过工厂生成组件实例，核心逻辑一致。

关键说明 #

只要my-comp的模板中包含<ng-content>标签（支持内容投影），原宿主元素的内容就会自动被投影到my-comp内部。即使无法修改my-comp，通过操作组件内部的视图容器，也能完成内容的插入。

使用示例 #

输入代码：

<div *my-dir>Hello World</div>

渲染后最终结构：

<my-comp>    
  <div>Hello World</div>
</my-comp>

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