为什么在 Angular 中删除组件模板中的 DOM 元素不安全

Question

因为 Angular 在内部表示使用通常称为视图或组件视图的数据结构的组件 source 并且更改检测在此工作数据结构，我应该怎么做才能实现类似于：

var el = document.getElementById('someSelector');

el.remove();

是否可以不使用 View Container 技术？如果不是，那么对 DOM 元素

进行这种限制操作的原因是什么

Answer 1

虽然我鼓励您使用 Angular 的内置结构指令更新 DOM，但您可以使用 Renderer2 class 来实现您想要的之后：

@Component({
  ...
  template: `
    <div #parent>
        <div #child></div>
    </div>
    <button (click)="removeElement()"></button>
  `
  ...
})
export class ExampleComponent {
  @ViewChild('parent') parentEl: ElementRef;
  @ViewChild('child') childEl: ElementRef;

  constructor(private readonly _renderer: Renderer2) {}

  removeElement(): void {
    this._renderer.removeChild(this.parentEl.nativeElement, this.childEl.nativeElement);
  }
}

为什么在 Angular 中删除组件模板中的 DOM 元素不安全

Why deleting DOM element inside component template is not safe in Angular

angular-components

angular