Как удалить element.nativeElement из DOM?

Question

Я пробовал так:

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

this.draggableElement.nativeElement.remove();

HTML:

<div #draggable>Block</div>

Answer 1

Служба 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

Answer 2

Ваш код также будет работать, только вы должны сделать это, удалить элемент в 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 демо

Answer 3

Вы можете использовать * ngIf right, которое будет удалено из DOM при сбое условия.

Block