Можно ли добавить HTML-элемент Angular с помощью Dom?

Question

Я использую Angular 7 и хотел бы добавить элемент HTML с помощью Javascript. Вот пример. "<" img [src] = {{address}} ">"

Я мог бы создать обычный HTML, как показано ниже: код

Однако для Angular мне нужно добавить [src] = {{address}}.

Есть ли способ добавить это?

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

Answer 1

Вы пытаетесь что-то вроде:

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

P.S. Я был вдохновлен (вы можете найти там использованную трубу): Как связать сырой HTML в Angular2

P.S.2 Я никогда не пробую угловой 7, поэтому, пожалуйста, не сердитесь на меня

Answer 2

Не вижу дела, зачем это делать. Вы можете создать и добавить элемент в DOM, но вам следует позаботиться об обновлении src самостоятельно. Angular не заботится об элементах, которые он не создал.

Если вы все равно хотите это сделать, вы можете создать шаблон ref для родительского элемента, в который вы хотите добавить: <div #container>... </div> в шаблоне вашего компонента.

Затем в вашем файле машинописного текста, где определен компонент, вам нужно запросить этот контейнер с помощью @ViewChild('container') container: ElementRef, а после него вы можете добавить его в этот:

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

Но будьте осторожны, это будет просто ваша головная боль. Старайтесь избегать таких реализаций