追加到body元素的元素在Angular 2中进行布线时不会被破坏

Question

检查演示链接： https://stackblitz.com/edit/angular-w7eij5?file=src%2Fapp%2Fdashboard%2Fdashboard.component.html

我在导航过程中将“正文内容”附加到了正文，而附加元素没有被破坏。

如何克服这个问题。

Answer 1

如果要创建动态元素或在元素内添加内容，则不应该使用Js或jQuery，这是angular打算这样做的方式。

对于Dom操作Angular，请使用Renderer2服务

首先注入Renderer2服务：

constructor(public ele: ElementRef, private rend:Renderer2)

然后在元素中使用模板变量

<h1 #r> Body content </h1>

viewChild获取元素的引用

@ViewChild('r') ref:ElementRef;

然后使用Renderer2创建或附加数据

 this.rend.appendChild(this.ref.nativeElement,text);

您修改的示例选中此复选框：https://stackblitz.com/edit/angular-w7eij5-ehqgkz

如果您想了解有关Renderer的更多信息，请检查以下https://angular.io/api/core/Renderer2：

Answer 2

使用Routing events删除在路由完成之前或之后添加的元素。