Можно ли переключать шаблоны Angular HTML?
Допустим, у нас есть услуга, имеющая значение mobile: boolean. В зависимости от этого мы отображаем правильный TemplateUrl для компонентов, которым он нужен.
Так что это будет что-то вроде TemplateUrl: condition ? template_1 : template_2
Я могу создать что-то подобное с помощью require, но оно не будет правильно собираться для производства. Когда я захожу на страницу с ним, я вижу null вместо шаблона (только prod).
Угловая версия 7
Я не думаю, что у вас может быть условное templateUrl. Предполагая, что mobile известно во время выполнения, вы можете поместить оба шаблона в один и тот же файл шаблона и использовать ngIf ... else, чтобы отобразить соответствующий в зависимости от условия.
Почему бы просто не поместить оба варианта в один шаблон и не использовать *ngIf?
Да, я видел эту ссылку, и да, это про AOT в prod. Прошло какое-то время с angular 5, поэтому у меня была небольшая надежда, что что-то изменилось в этой теме. Да, я мог бы сделать это с помощью ngIf или создать абстрактные классы и компоненты для мобильных / настольных компьютеров, чтобы наследовать от него, чтобы держать логику в одном месте + сделать отдельную маршрутизацию для мобильных устройств, но это довольно уродливое решение.
Ответы 1
Объявление @Component обрабатывается статически с усложнением AOT, и templateUrl не может быть предоставлено на основе переменной.
Способ справиться с этим состоит в том, чтобы отделить вашу логику от способа отображения страницы. Для любой части пользовательского интерфейса, которая по-разному отображается на мобильных устройствах и компьютерах, можно создать отдельный компонент. Основной компонент или общий базовый класс или компонент должны содержать всю логику.
<div>
<p>Graph:</p>
<graph-mobile *ngIf = "mobile" [data] = "data"></graph-mobile>
<graph-desktop *ngIf = "!mobile" [data] = "data"></graph-desktop>
</div>
Да, это самый простой способ решить эту проблему, но я ищу что-то более умное (если даже есть лучший способ ее решить). Кстати: Плохая вещь в том, что вам нужно скопировать логику в 2 файла машинописного текста. Я думаю об абстрактных классах + что-то похожее, но больше основанное на маршрутизации.
Я обновил ответ, чтобы было более понятно, что логика не должна дублироваться. Маршрутизация в порядке. Вы можете попытаться построить маршруты своего приложения динамически или использовать средства защиты активации (CanActivate), чтобы, возможно, перенаправлять пользователей на основе мобильного значения.
В общем, это можно решить стандартной настройкой html/css или angular + flexlayout, если хотите. причина, по которой вы столкнетесь с проблемами, скорее всего, связана с AOT в prod вместо JIT для dev. Кроме того, я нашел аналогичный вопрос: stackoverflow.com/questions/49974776/…, который также говорит, что это невозможно, поскольку вы собираетесь это сделать.