Как правильно стилизовать глобальные компоненты в других компонентах?

Question

[Bowen]

Привет други.

Какие есть варианты стилизовать глобальные компоненты использующихся в других компонентах ?
Например, есть несколько страниц: /page-a и /page-b.
У каждой собственный дизайн и много всего еще общего, например поиск.
Как подстроить компонент поиска под дизайн каждой из страниц ?
Какие вообще есть варианты ?

Буду признателен за помощь/советы!

Comments

[Alexander Belov]

Что такое "компонент поиска" в плане визуализации? Я так понимаю, это обычный search bar?

[Bowen]

Alexander Belov: Да, все верно.

[Alexander Belov]

Тогда, по идее, он должен присутствовать на каждой странице приложения. Скорее всего, внутри статичного header, который, как правило, рендерится в контексте app.component.ts. Соответственно, и стили пишем там же в "корневом / начальном" компоненте, который никогда не меняется. - всегда статичен (как каркас, внутри которого рендерятся остальные страницы).

[Bowen]

Alexander Belov: Это не представляется возможным, так как у страниц сложные шаблоны. Все отличается(в некоторых местами а в некоторым полностью). Да и один каркас я не представляю как сделать. Как каркас в таких ситуациях(как моя) header,main,footer надо указывать в главной компоненте каждой страницы.

[Alexander Belov]

Bowen: Можешь выложить пример кода? Интересно посмотреть, каким образом устроено.

[Bowen]

Alexander Belov: pastebin.com/ditsZzbY

[Bowen]

Alexander Belov: А как вы себе это представляете ?) можете также поделиться своей реализацией ? буду вам очень признателен!

[Alexander Belov]

Bowen: Упрощённо, у меня так:
pastebin.com/gLQTxZ6F

Соответственно, есть app.component.scss, где прописаны стили для всех статичных элементов: header, footer, search bar, whatever...
При клике по ссылкам компоненты Home, Portfolio, Contact рендерятся в router-outlet, не задевая статичного каркаса.

[Bowen]

Alexander Belov: У вас один шаблон. У меня же несколько. Попробую объяснить по другому. У меня получается что каждая страница(назовем так) идет как отдельный сайт. Тостер - один шаблона, а Хабр - другой шаблон.

[Alexander Belov]

Bowen: Если я правильно понимаю, тогда у шаблонов нет (во всяком случае, не должно быть) общих header, main, footer.
Но каждый из них имеет свою "главную" страницу.
Toster - toster.component.ts
Habr - habr.component.ts

И в этих главных компонентах всё рендерится по принципу, указанному выше.
E.g.: toster.component.html
- toster-header /toster-header
- toster-main
router-outlet /router-outlet
/toster-main
- toster-footer /toster-footer

[Bowen]

Alexander Belov: Все верно. Общие header/main/footer не получится сделать. А далее я так и намерен сделать(как вы указали).
Остается решить вопрос со стилизацией глобальных компонентов. Указывать стили к поиску в стилях каждого раздела - так делать не хорошо имхо. Глобальных компонентов может быть много и многие из них могут понадобиться в других компонентах. У некоторых могут быть большие стили, по этому я не хочу так делать.

[Alexander Belov]

Bowen: Ну, для toster свой search bar, для habr - свой.
Внутри всего "приложения / сайта" toster этот search bar неизменен.
Соответственно, блок, где он находится (допустим, header) стилизируется один раз в toster.component.css. То же и для habr.
Других вариантов не вижу.

[Bowen]

Alexander Belov: Я описал вариант который мне показался самым правильным в комментарий к ответу Алекса.

[Alexander Belov]

Bowen: Да, я видел. Но мне кажется, что это немного "велосипед". Ведь шаблонов не больше, чем компонентов (иначе какой смысле делать для одного toster несколько search bar)?
Соответственно, у каждого компонента только один общий шаблон для статических элементов (в т.ч. search bar).
Если всё же есть такое, что у toster и habr задуман один и тот же search bar по виду, но, допустим, разные header, footer, etc, то можно прописывать ссылку на стиль из некого файла shared.styles.css, в котором будут стили, необходимые нескольким элементам из разных компонентов (toster, habr...)

[Bowen]

Alexander Belov: Ладно. Пожалуй так и сделаю. В будущем пересмотрю это решение. Большое спасибо за уделенное время и за советы!

[Alexander Belov]

Bowen: Интересно было бы потом посмотреть на результат. Удачи!

[Bowen]

Alexander Belov: Мне тоже ). Спасибо!

[Bowen]

Alexander Belov: Такой вариант не получается сделать без смены вида инкапсуляции. А сделать этого я не хочу.

Answer 1

[Alex]

Стили описывать для страницы. Не для шаблона а для страницы.

Comments

[Bowen]

Тоже об этом думал. Но мне кажется что это не то.
Мне кажется правильным решением, передавать с помощью директив ссылки на шаблоны + стили при подключении компонента.
Т.е search([templateUrl]="./page-a/page-a.template" [stylesUrl]="./page-b/page-b.styles")
Но к сожалению, я не смог такое реализовать.