如何在Angular 5中创建结构指令包裹DOM并添加元素？

我来帮你搞定这个需求！你需要的是一个自定义结构指令，它能把标记了指令的元素包裹在<div>里，同时自动添加第二个<p>元素。下面是一步步的实现方案：

1. 创建自定义结构指令 #

首先新建一个指令文件（比如wrapper.directive.ts），代码如下：

import { Directive, TemplateRef, ViewContainerRef, Renderer2, OnInit } from '@angular/core';

@Directive({
  selector: '[wrapper]' // 指令选择器，注意结构指令使用时要加*前缀
})
export class WrapperDirective implements OnInit {

  constructor(
    private templateRef: TemplateRef<any>, // 获取被指令标记的内容模板
    private viewContainer: ViewContainerRef, // 管理视图容器，用于插入/移除DOM
    private renderer: Renderer2 // 安全操作DOM的工具，避免直接操作原生DOM
  ) { }

  ngOnInit(): void {
    // 1. 先创建原模板的视图，拿到原内容的DOM节点
    const originalView = this.viewContainer.createEmbeddedView(this.templateRef);
    const originalNodes = originalView.rootNodes;

    // 2. 清空当前视图容器，准备替换成新的结构
    this.viewContainer.clear();

    // 3. 创建外层的<div>容器
    const wrapperDiv = this.renderer.createElement('div');

    // 4. 把原内容的DOM节点移到<div>里
    originalNodes.forEach(node => {
      this.renderer.appendChild(wrapperDiv, node);
    });

    // 5. 创建第二个<p>元素并添加到<div>中
    const secondParagraph = this.renderer.createElement('p');
    const secondText = this.renderer.createText(' this is my second ');
    this.renderer.appendChild(secondParagraph, secondText);
    this.renderer.appendChild(wrapperDiv, secondParagraph);

    // 6. 把组装好的<div>插入到视图容器中
    this.viewContainer.insert(wrapperDiv);
  }
}

2. 在模块中声明指令 #

打开你的根模块（比如app.module.ts），把这个指令添加到declarations数组里，这样Angular才能识别它：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { WrapperDirective } from './wrapper.directive'; // 导入指令

@NgModule({
  declarations: [
    AppComponent,
    WrapperDirective // 声明指令
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 在模板中使用指令 #

现在你可以在组件模板里这样用了（注意要加*前缀，这是Angular结构指令的语法糖）：

<p *wrapper> this is my first line </p>

运行后，最终生成的HTML就是你想要的：

<div>
  <p> this is my first line </p>
  <p> this is my second </p>
</div>

额外优化：动态传入第二个段落的内容 #

如果想让第二个段落的内容可配置，可以给指令加一个@Input()参数：

修改指令代码：

@Input() wrapper: string; // 接收外部传入的文本

ngOnInit(): void {
  // ... 前面的代码不变 ...
  
  // 创建第二个<p>时使用传入的文本，没有传入则用默认值
  const secondText = this.renderer.createText(this.wrapper || ' this is my second ');
  
  // ... 后面的代码不变 ...
}

模板中使用时传入内容：

<p *wrapper="' this is custom second line '"> this is my first line </p>

这样就能灵活控制第二个段落的内容啦！

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