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

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

elem: HTMLElement;

В шаблоне:

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

Я получаю эту ошибку:

TypeError: templateRef.createEmbeddedView is not a function
1
Iter Ator 5 Май 2020 в 17:29

2 ответа

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

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

< Сильный > Машинопись :

public elem: HTMLElement;

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

< Сильный > HTML:

<div innerHTML="getElement()"></div>
0
Ron Rofe 5 Май 2020 в 15:12

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

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

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

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

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

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

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

0
Lazar Ljubenović 5 Май 2020 в 16:05