Angular 7: динамически генерировать шаблон

Question

Я переписываю свой сайт https://ixtutor.com/ полностью в угловом формате.Я создал несколько компонентов, которые отображаются в виде виджетов на странице блога.

Например, в сообщении блога https://ixtutor.com/tensorflow-basics-with-housing-prices-prediction-example-chapter-i/ есть такие виджеты, как, (i) Виджет бегуна кода (ii) Виджет упражнений

Я моделирую эти виджеты как компоненты в моем угловом приложении.

Задача : Одна из страниц моего приложения - это живой редактор HTML, который позволяет автору писать (угловые) шаблоны HTML в текстовой области T1 и видеть (визуализированный) вид рядом друг с другом.Я также хочу, чтобы автор мог использовать компоненты виджета в создаваемом html-файле.

Это прекрасно работает с обычными html-тегами, где я могу использовать свойство innerHTML элемента div для прямой привязки ngModelтекстовая область T1, однако, не работает для угловых компонентов.

Я смотрел на динамические угловые компоненты , но я не могу понять, как использовать это в полном объемеHTML шаблон.Буду очень признателен за любые рекомендации или предложения.

Спасибо.

Answer 1

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

Единственный способ - скомпилировать ваши угловые компоненты с веб-компонентами, используя угловые элементы , таким образом, вы будетевозможность вставлять их как пользовательские элементы HTML в ваше приложение.

Для этого вам нужно будет разработать их в отдельной библиотеке.