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

发布时间：2020-12-17 07:10:22 所属栏目：安全来源：网络整理

导读：我有一个指令,需要将应用它的元素移动到文档的主体： @Directive({ selector: '[myDirective]'})export class MyDirective implements AfterViewInit { constructor(private elem: ElementRef,private renderer: Renderer2) { } ngAfterViewInit() { // Move

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

@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中的元素：

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

但请注意,当您导航到相同的路线时,angular不会破坏它(这意味着ngOnDestroy不会触发).您可以尝试添加其他路线并导航到该路线进行确认.

见demo.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!