Как сделать отдельные файлы .html и .scss для компонента для мобильной версии?

Question

Можно ли заставить Angular 7 подобрать определенный шаблон и файл стиля и передать его пользователю?

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

На данный момент, как я вижу, есть только одно решение - это скрытие ng-шаблонов (некоторых частей кода) для разных устройств.

Я прочитал много вопросов здесь, но они все старые.Я надеюсь, что в этом быстро меняющемся мире ИТ что-то могло измениться в последнее время, и есть хорошее и элегантное решение для решения таких задач.

Я пытался решить это таким образом -

(b) ? './app.component.html' : './test2.html';

, но, к сожалению, это не работает

Буду признателен за любые подсказки на этот счет.

PS: мне очень нравится структура того, как NativeScript реализовал это недавно.Было бы неплохо иметь такую ​​же способность.

Answer 1

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

Отличное руководство и видео-учебник для того, чтобы сделать это с маршрутизацией можно найти здесь: https://angularfirebase.com/lessons/how-to-lazy-load-components-in-angular-4-in-three-steps/

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

Мое решение:

1) Создайте два модуля, один для всех компонентов вашего рабочего стола, другой для всех ваших мобильных компонентов.

2a) Ленивый Загрузите оба из них в ваш основной AppModule согласно руководству, указанному выше

или

2b) Импортировать все компоненты в вашем AppModule, если размер пакета не является проблемой

3) Создайте родительский компонент, единственной задачей которого является определение, является ли пользователь настольным или мобильным

parent.component.ts будет иметь логику для определения, является ли пользователь мобильным или настольным компьютером, и может делать это с любым количеством оконных вычислений или пакетов npm

parent.component.html будет иметь два компонента и ngIf с isMobile, определяющим, какой компонент визуализировать.

Бонусные баллы

Изолируйте свою логику, создав единый класс для соответствующих компонентов и просто импортировав различные шаблоны