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

Question

我正在使用Angular 7，并且想使用Javascript添加html元素。 这是例子。     “ <” img [src] = {{address}}“>”

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

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

有什么办法可以添加吗？

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

Answer 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);

但是要小心，这只会让您头疼。尝试避免这种实现方式

Answer 2

您尝试类似的事情吗？

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

P.S。我的灵感来自（您可以在这里找到用过的管道）： How to bind raw html in Angular2

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