khegay
@khegay
Founder, NNDB Kazakhstan

Правильный путь для рендера HTML/CSS внутри компонента, получаемых с сервера?

При разработке приложения на Angular 9, я столкнулся с проблемой отображения HTML и CSS, полученного со стороннего сервера.

К сути:

Внутри приложения есть компонент с рекламными блоками.
Каждый рекламный блок состоит из нескольких частей, которые могут динамически изменятся:
Свойства рекламного блока
selectedTemplate: AdvertTemplate = null
selectedCharacter: AdvertCharacter = null
headline: string = ''
description: string = ''


  • selectedTemplate - объект, внутри которого html и css
  • selectedCharacter - объект, внутри которого путь к изображению
  • headline - строка с заголовком
  • description - строка с описанием




С API приложение получает массив с объектами AdvertTemplate и отдельный массив с AdvertCharacter

AdvertTemplate, примерно выглядит так (но может быть разным):
Объект получаемый с сервера
html:
<div class="tpl">
   <h1 class="tpl__head">{{ title }}</h1>
   <img class="tpl__img" src="{{ img }}">
</div>

css:
.tpl {
    display: flex;
}

.tpl__head {
    font-size: 2rem;
}

.tpl__img {
    display: block;
    width: 10rem;
    height: auto;

    border-radius: 50rem;
}


Пользователь выбирает нужный шаблон по картинкам, заранее сохранённым, вводит текст и выбирает AdvertCharacter. Приложение должно показывать в реальном времени изменение шаблона, характера и заголовков.

Первый путь, по которому я пошёл:


Я получал все шаблоны, и когда пользователь выбирал нужный шаблон, с помощью DomSanitizer вставлял HTML в нужный мне блок с помощью [innerHTML].

Проблема: все переменные внутри {{ }} отображались как текст, и приложение не могло с ними взаимодействовать. До CSS даже не дошёл.


Второй путь, который я искал на SO:

Я попытался использовать Dynamic component loader
, но так и не смог разобраться как же работает рендер. Под разными углами, в консоль вываливались разного вида ошибки.


---
Вопрос: можно ли как-то собирать шаблон, изменять в нём данные без танцев с бубном?
  • Вопрос задан
  • 34 просмотра
Пригласить эксперта
Ответы на вопрос 1
alex_romanov116
@alex_romanov116
Web-developer
Вам необходимо использовать Jit Compiler, в runtime, (значительно увеличит размер бандла, желательно выносить в lazy)
Пример на stackblitz : https://stackblitz.com/github/lyczos/angular-dynam...
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы