Как отобразить HTMLElement из переменной в компоненте Angular?

Question

Я храню динамически сгенерированный HTMLElement в переменной в моем классе компонентов. Я хотел бы показать это, но понятия не имею, как это возможно. Пробовал вот так:

Внутри класса компонента:

elem: HTMLElement;

В шаблоне:

<ng-container *ngTemplateOutlet="elem"></ng-container>

Получаю такую ​​ошибку:

TypeError: templateRef.createEmbeddedView is not a function

Answer 1

Если у вас голый HTMLElement, там ничего Angular -й вы не сможете сделать. NgTemplateOutlet ожидал TemplateRef, а не ванильного HTMLElement объекта.

Чтобы вставить элемент HTML в DOM, просто используйте для этого соответствующий метод DOM. Какой из них вы будете использовать, полностью зависит от места, где вы хотите его использовать.

Например, вы можете сделать

const wrapper = document.querySelector('div.wrapper')
wrapper.append(el) // pass in your element

Вы также можете получить ссылку на оболочку в подробнее Angular, добавив ссылку Angular в шаблон на элемент, который вы хотите выбрать,

<div class="wrapper" #wrapper></div>

и используя ViewChild декоратор для свойства, которому вы хотите назначить Angular от ElementRef до.

@ViewChild('wrapper', { static: true, read: ElementRef })
public wrapperElRef: ElementRef<HTMLDivElement>

После инициализации представления (вы получите уведомление, когда это произойдет через ловушку ngAfterViewInit), вы можете захватить элемент HTML внутри, обратившись к `. nativeElement:

this.wrapperElRef.nativeElement //: HTMLDivElement

Теперь вы можете сделать

this.wrapperElRef.nativeElement.append(elem)

---

Тем не менее, если вы не знаете, что делаете (обычно обертывание существующей библиотеки или интеграция с существующей большой систему, которую вы еще не можете полностью реорганизовать)

Answer 2

В большинстве случаев это зависит от того, как вы создали html. Я предлагаю указать в комментариях, где вы получаете переменную, содержащую HTMLElement, чтобы я мог дать вам наиболее эффективный способ сделать это.

Но в целом - попробуйте использовать привязку innerHTML в родительском элементе .

Машинопись:

public elem: HTMLElement;

public getElement(): string {
   return this.elem.innerHTML;
}

HTML:

<div innerHTML="getElement()"></div>