在 Angular 2 中的路由期间，附加到 body 元素的元素不会被破坏答案

【问题标题】：Element appended to the body element is not destroyed during routing in Angular 2在 Angular 2 中的路由期间，附加到 body 元素的元素不会被破坏
【发布时间】：2018-07-19 22:53:45
【问题描述】：

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

我在通过路由导航时将“正文内容”附加到正文中，附加元素不会被破坏。

如何克服这个问题。

【问题讨论】：

标签： javascript angular typescript

【解决方案1】：

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

【讨论】：

【解决方案2】：

如果你想创建动态元素或在元素内添加内容你不应该使用 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

如果您想了解更多关于渲染器的信息，请查看https://angular.io/api/core/Renderer2：

【讨论】：