Angular 8 + Атоми c Дизайн

Question

У меня есть несколько вопросов об атоми c дизайн в angular. Основы понятны, я создаю самые маленькие компоненты Atom c, а затем делаю ссылки на более крупные, вплоть до страницы. Когда следует использовать отображение в разных разрешениях в шаблонах? Допустим, у меня есть страница входа или домашняя страница для еще лучшего примера, который будет выглядеть совершенно по-разному на мобильных устройствах и компьютерах. Я создаю шаблон дома и здесь в CSS я указываю дисплей для каждого разрешения? Является ли шаблон подходящим местом для него?

Второй вопрос о предоставлении данных из бэкэнда - это эти компоненты. Когда у меня уже есть шаблон, я использую его на домашней странице и в home.component.ts, внедряю некоторые службы, скажем, для статей, профиля, уведомлений, а затем получаю эти данные с помощью @Input () и выдаю их? Скорее это приведет к такой избыточной цепочке данных (данные должны go проходить через каждый компонент, чтобы достичь дна). Как это должно работать? Какой подход к топи c?

Answer 1

(Вы должны придерживаться одного вопроса и опубликовать 2 темы, чтобы StackOverflow мог легко найти вопросы / ответы).

Это интересные вопросы и важные дизайнерские решения.

Лучшие практики для go с вашими двумя вопросами:

1. Для разработки адаптивных страниц: используйте Angular Flex-layout . Это позволяет вам специализировать отображение в зависимости от размера области просмотра. Я никогда не сталкивался со страницей, где дизайн был бы настолько разным, что для каждого требовалось указать c компонента. Но в любом случае вы всегда можете использовать некоторые комбинации fxShow / fxHide для достижения ваших потребностей, если это не вызывает проблем с производством.

2. В зависимости от фактического объема данных вам нужно делиться между компонентами, вы можете go с несколькими решениями (у вас есть больше вариантов, посмотрите официальные документы ):

   • Light : go как вы описываете. Вы делитесь данными вниз по иерархии компонентов. Как вы намекаете, он плохо масштабируется, потому что изменение где-то в цепочке влечет за собой изменения в другом месте.
   • Средний : используйте Сервис для хранения и предоставления данных ( последняя часть предыдущая страница ).
   • Large : использовать ngrx-store . Тогда ваше приложение имеет асинхронное хранилище, которое играет роль службы в предыдущем сценарии. Он стандартизирует способ доступа к этим данным из любого компонента и является единственной точкой правды. Это лучшая практика и идиома, которая дает много преимуществ. Но кривая обучения и начальные затраты на настройку не подходят для всех проектов и / или уровней опыта (вам нужно быть особенно хорошо с Rx Js - go со способом Service, если вы еще не уверены).