angular – 操作DOM后,路由器导航中的元素不会被破坏

我有一个指令,需要将应用它的元素移动到文档的主体：

@Directive({
  SELEctor: '[myDirective]'
})
export class MyDirective implements AfterViewInit {
  constructor(private elem: ElementRef,private renderer: Renderer2) {
  }

  ngAfterViewInit() {
    // Move element to body
    this.renderer.appendChild(document.body,this.elem.nativeElement);
  }
}

现在我在一个带有ngIf的元素中使用这个指令,我根据一些条件进行切换：

<div myDirective *ngIf="visible">Test</div>
<button (click)="visible = !visible">Toggle</button>

当它运行时,div将按预期显示在按钮之后,因为它被附加到正文.此时切换按钮仍然有效,我可以显示/隐藏div.

当我介绍路线时,问题出现了：

<a routerLink="/route/1">Link</a>
<div myDirective *ngIf="visible">Test</div>
<button (click)="visible = !visible">Toggle</button>

现在,如果我显示div,并导航到另一条路线,div应该被摧毁,但它仍然可见！如果我不将div移动到身体,那么它的行为与预期的一样.

首先,我尝试删除ngOnDestroy中的元素,但这不适用于动画,因为它删除元素而不播放它：leave动画.

我目前的解决方法是将路由器注入指令并订阅第一个将div恢复到其原始容器的事件：

this.routerSubscription = router.events.first().subscribe(() => {
  this.renderer.appendChild(this.parentNode,this.elem.nativeElement);
});

虽然这有效,但它并不好,因为现在该指令在路由器中具有依赖性,而它应该对它一无所知.

如何改进这个黑客以确保元素被正确销毁？

演示：https://stackblitz.com/edit/angular-qximjw?file=app%2Fapp.component.ts

要重现此问题：

>确保它位于根目录而不是路径中的URL
>单击切换按钮
>单击链接以导航到路线
>观看div不会消失

ngOnDestroy() {
  if (this.routerSubscription) {
    this.routerSubscription.unsubscribe();
  }
  document.body.removeChild(this.elem.nativeElement);
}