是否可以使用 Dom 添加 Angular 的 html 元素？答案

【问题标题】：Is it available to add Angular's html element by using Dom?是否可以使用 Dom 添加 Angular 的 html 元素？
【发布时间】：2019-06-09 20:23:05
【问题描述】：

我正在使用 Angular 7，并希望使用 Javascript 添加 html 元素。这是示例。 ""

我可以像下面的代码一样创建常规的 html

但是对于 Angular，我需要添加 [src]={{address}}。

有什么办法可以这样添加吗？

let img = document.createElement('img');
img.src = "......";

【问题讨论】：

不，冒犯，但你为什么要这样做？你确定没有“角度方式”可以做到这一点吗？
如果您还没有，请参加一些有关 Angular 的课程，并充分了解该框架提供的所有内容以及如何以“Angular 方式”做事。作为一般规则，如果你试图在 Angular 背后将东西注入到 DOM 中，那么你使用的框架是错误的，你不想与框架对抗。 Ultimate Angular 提供了一些很棒的课程，Udemy 也是如此，并且有很多在线资源可以帮助您学习使用框架的最佳方式。

【解决方案1】：

不明白为什么要这样做。您可以创建元素并将其添加到 DOM，但您应该自己更新src。 Angular 不关心它没有创建的元素。

如果您仍然想这样做，那么您可以在要添加到的父元素上创建一个模板引用：<div #container>... </div> 在您的组件模板中。

然后在定义组件的打字稿文件中，您需要使用@ViewChild('container') container: ElementRef 查询此容器，然后您可以将其添加到该容器中：

let img = document.createElement('img');
img.src = this.srcProp;
this.container.nativeElement.appendChild(img);

但请注意，这只会让您头疼。尽量避免这样的实现

【讨论】：

【解决方案2】：

您是否尝试过类似的方法：

<img src="{{someAddrs | safeHtml}}">

附：我的灵感来自（你可以找到用过的管道）： How to bind raw html in Angular2

P.S.2 我从不尝试 Angular 7，所以请不要生我的气

【讨论】：