Angular中移除my-div-2块且保留my-div-1引用的实现方案

需求说明 #

现有嵌套DOM结构：

<div class="my-div-1">
  <div class="my-div-2">
    <div class="my-div-3">
      <p>Hello World</p>
    </div>
  </div>
</div>

需要移除class为my-div-2的div，保留my-div-1和my-div-3，且操作过程中不能丢失my-div-1的引用。

方法一：使用ViewChild + Renderer2（推荐，符合Angular最佳实践） #

通过ViewChild获取my-div-1的引用，使用Angular官方提供的Renderer2进行DOM操作，兼容浏览器、服务器端渲染等多平台场景。

组件代码示例：

import { Component, ViewChild, ElementRef, Renderer2, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <div #myDiv1 class="my-div-1">
      <div class="my-div-2">
        <div class="my-div-3">
          <p>Hello World</p>
        </div>
      </div>
    </div>
  `
})
export class ExampleComponent implements AfterViewInit {
  @ViewChild('myDiv1', { static: false }) myDiv1!: ElementRef<HTMLDivElement>;

  constructor(private renderer: Renderer2) {}

  ngAfterViewInit(): void {
    // 定位my-div-2元素
    const myDiv2 = this.myDiv1.nativeElement.querySelector('.my-div-2');
    if (!myDiv2) return;

    // 取出my-div-3
    const myDiv3 = myDiv2.querySelector('.my-div-3');
    if (!myDiv3) return;

    // 将my-div-3移动到my-div-1下
    this.renderer.appendChild(this.myDiv1.nativeElement, myDiv3);
    // 移除my-div-2
    this.renderer.removeChild(this.myDiv1.nativeElement, myDiv2);
  }
}

方法二：直接操作DOM（仅浏览器环境适用） #

如果仅在浏览器环境运行，也可以直接通过nativeElement操作DOM，但该方式不支持跨平台场景，不推荐在通用项目中使用。

组件代码示例：

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <div #myDiv1 class="my-div-1">
      <div class="my-div-2">
        <div class="my-div-3">
          <p>Hello World</p>
        </div>
      </div>
    </div>
  `
})
export class ExampleComponent implements AfterViewInit {
  @ViewChild('myDiv1', { static: false }) myDiv1!: ElementRef<HTMLDivElement>;

  ngAfterViewInit(): void {
    const myDiv2 = this.myDiv1.nativeElement.querySelector('.my-div-2');
    if (!myDiv2) return;

    const myDiv3 = myDiv2.firstElementChild;
    if (!myDiv3) return;

    // 移动my-div-3到my-div-1下
    this.myDiv1.nativeElement.appendChild(myDiv3);
    // 移除my-div-2
    myDiv2.remove();
  }
}

两种方法均会始终保留myDiv1的引用，操作后DOM结构变为：

<div class="my-div-1">
    <div class="my-div-3">
      <p>Hello World</p>
    </div>
</div>

内容的提问来源于stack exchange，提问作者New York is my city