Всем привет. <ng-content select="[main-title]" class="main-title"></ng-content> <ng-content select="[subtitles]" class="subtitles"></ng-content> <ng-content select="[action-buttons-wrapper]" class="action-buttons-wrapper" fxLayout="column"

fxLayoutAlign="flex-start flex-start"></ng-content>
<ng-content select="[table-title]" class="table-title"></ng-content>
цель - этот контент будет на страницах по стилизации одинаковый, но по содержанию разный(разные кнопки в зависимости от стейта и тд)
однако в ng-content стили не прокидываются без нгдипа. какие есть альтернативы? хочу прокидывать шаблон в компонент, но что бы стилизация лежала внутри компонента обертки

может это вам подойдет https://github.com/TinkoffCreditSystems/ng-polymorpheus

никаких. только глобал стили, т.е. либо нгдип, либо без енкапсуляции. да норм, прячешь под каскад.

а какие альтернативы?

последнее не понял. нгдип норм что ли?

да. норм

но он же депрекейтед((

оно сто лет уже депрекейтед и альтернативы не предвидится и никто не знает что это будет.

эх а я хотел по красоте сделать решение а оказывается все таки либо нгдип либо глобальные стили. печаль. спасибо

ну альтернатива есть. Но она не очень красивая. Так то можно ViewEncapsulation грохнуть именно для этого родителя, и в нем уже прихранивать стили

ну как сказать. енкапсуляция так сделана, что порой думаешь лучше уж глобальные стили :) но она удобна, поэтому используем

тоже самое

ну вот у меня как раз ситуация когда 9 компонент используют так или иначе одинаковые стили. но есть причины по которым это всё не превратить в 1 компонент. поэтому я думал такой прикол сделать. а глобальные стили удобно миксинами подключать, хотя бы определённость будет. но у меня в проекте темизация материала и основной файл less есть. получается каша и непонятно куда лучше подключить стиль какого-то блин хедера таблицы

миксины не связаны с глобальными стилями. Если вы используете миксин в компоненте, он просто создает эти правила заново и добавляет к ним префикс. Т.е. на каждый компонент будут свои классы.

ну а если в глобальном less лежит .header {} то тогда оно будет одно для всех компонентов? то есть правила заново создаваться не будут?

если у тебя в global лежит .header и в компоненте лежит .header то последний перепишет стили глобала

это я понимаю. я ради того что бы не писать в каждом компоненте .header {} и хочу организовать глобальные стили по-человечески. думал через ng-content но там стили без нгдипа не применяются

тогда Антон говорит правильно, в глобальных стилях ng-deep. Пойду гляну свои рабочие проекты, может и у нас они есть

почему в глобальных-то нгдип? нг-дип можно бахнуть <div class="header-wrapper"> <ng-content select="[main-title]" class="main-title"></ng-content> <ng-content select="[subtitles]" class="subtitles"></ng-content> <ng-content select="[action-buttons-wrapper]" class="action-buttons-wrapper" fxLayout="column" fxLayoutAlign="flex-start flex-start"></ng-content> <ng-content select="[table-title]" class="table-title"></ng-content> </div> вот тут и всё будет почти что инкапсулировано))

для понимания создай простенький проект и посмотри какие префиксы от какого компонента попадают в разметку. на тег компонента вешается ng-host чето там, а на все что внутри ng-content а ng-deep просто убирает этот префикс из объявления стиля. Тоже самое делает отключение енкапсуляции или просто глобальный стиль в style.scss

создаются все правила, которые описаны в стилях компонента. в конечном css никаких миксинов нету

я имею в виду не миксины а просто глобальные стили. они ведь не будут дублироваться если в приложении будет 7 элементов с классом .header

не будут

тогда в чем минус нгдипа если он используется в отдельно взятом компоненте - :host::ng-deep ? то что он может когда-то пропасть?

я ниче про минусы не говорил :)

а они есть?)

ну если в компоненте сплошные нг-дип, то лучше просто отключить енкапсуляцию, но ваще минусов нет

спасибо : )

cтоп. но по такой логике вообще всегда выгодно юзать глобальные стили в обход инкапсуляции. т.к. они никогда не будут порождать доп.стили. я вот сделал компонент и стилизовал его - использую 10 раз в приложении. и в каждый будут копироваться инкапсулированные стили?..

да

так это же очень плохо..

подожди. нет. стили самого компонента 1 раз объявляются Это если ты в него импортишь какие нить миксины, они копируются.

объявляются 1 раз. используются - n раз, где n - количество раз использований компонента

почему? миксины разворачиваются в такой же less/scss код как и содержимое стилей компонента

при использовании там те же префиксы

ээээ. вон оно шо