如何从 DOM 中删除 element.nativeElement？答案

【问题标题】：How delete element.nativeElement from DOM?如何从 DOM 中删除 element.nativeElement？
【发布时间】：2021-10-22 23:59:29
【问题描述】：

我试过这样：

    @ViewChild('draggable') private draggableElement: ElementRef;

    this.draggableElement.nativeElement.remove();

HTML：

    <div #draggable>Block</div>

【问题讨论】：

为什么要使用 Angular 以编程方式删除 DOM 元素？

标签： angular angular5

【解决方案1】：

您的代码也可以工作，您只需在 OnInit() 上删除元素，如果您尝试在构造函数上删除元素，则视图尚未准备好。

这是一个例子

在.html

中

    <div #draggable>Block</div>

在 .ts

中

    export class AppComponent implements OnInit {
      name="Angular";
    
      @ViewChild('draggable') private draggableElement: ElementRef;
    
      constructor() { }
    
      ngOnInit() {
       this.draggableElement.nativeElement.remove();
      }
    }

这是一个Stackblitz 演示

【讨论】：

【解决方案2】：

用户 Renderer2 服务从 dom 中删除元素

removeChild() 实现此回调以从宿主元素的 DOM。

@ViewChild('draggable')  draggableElement: ElementRef;
constructor(private renderer2: Renderer2,private el:ElementRef) {}
ngOnInit() {
  this.renderer2.removeChild(this.el.nativeElement,this.draggableElement.nativeElement);
}

例如：https://stackblitz.com/edit/angular-renderer2-remove

【讨论】：

【解决方案3】：

你可以正确使用*ngIf，当条件不成立时会从DOM中移除。

堵塞

【讨论】：

我问了另一个问题，与 ngIf 无关

【解决方案4】：

如果您既不能使用*ngIf 也不能使用nativeElement，因为您尝试删除的是一个组件，我建议您使用纯javascript 删除该组件。

<your-component id="draggable" #draggable>Block</your-component>

document.getElementById('draggable').remove()

如果您想以有角度的方式执行此操作，则必须使用ViewContainerRef。该方法在this issue

中进行了解释

【讨论】：