Ответ 1
1.. Это решение хорошо, но оно более подходит для любых общих стилей, которые должны быть доступны для всех компонентов. Например, стили для css-сеток. Чтобы сделать его более угловатым, вы можете установить инкапсуляцию для компонента приложения в none:
`@Component({
selector: 'my-app',
template: ` `,
styleUrls: ["shared.style.css"],
encapsulation: ViewEncapsulation.None
}) export class App {}`
Демо можно найти здесь (plunker)
Примечание. Стили, включенные этими способами (просто добавление тега стиля или без инкапсуляции), будут влиять на все элементы ваших страниц. Иногда мы хотим, чтобы мы действительно хотели (соглашаемся использовать любую фреймворк css для проекта дыр). Но если просто хотите поделиться стилями между несколькими компонентами - это, вероятно, не самый лучший способ.
Summary:
(+) easy to use
(-) no encapsulation
2. Мне нравится это решение, потому что оно очень понятно и имеет предсказуемое поведение. Но есть одна проблема с ней:
Он будет добавлять тег стиля с вашими совместно используемыми стилями каждый раз, когда вы его используете. Это может быть проблемой, если у вас большой файл стиля или много элементов, которые его используют.
@Component({
selector: 'first',
template: `<h2> <ng-content> </ng-content> </h2>`,
styleUrls: ["shared.style.css"]
})
export class FirstComponent {}
Демо можно найти здесь (plunker)
Summary:
(+) easy to use
(+) encapsulation
(-) duplicates styles for every usage
3. Есть еще один вариант, который вы могли бы использовать. Просто создайте еще один компонент, который будет предоставлять общие стили для него.
` <styles-container>
<first> first comp </first>
</styles-container>
<styles-container>
<second> second comp </second>
</styles-container>`
В этом случае вам придется использовать/deep/в ваших стилях, чтобы сделать стиль доступным для дочерних компонентов:
:host /deep/ h2 {
color: red;
}
Мне также стоит упомянуть, чтобы не забывать использовать: host, чтобы сделать стили доступными только для дочерних элементов. Если вы опустите его, вы получите еще один глобальный стиль.
Демо можно найти здесь (plunker)
Summary:
(-) you have to create container and it in templates
(+) encapsulation
(+) no duplicated styles
Примечания. Инкапсуляция стилей - действительно крутая функция. Но вы также должны помнить, что нет возможности ограничить ваши глубокие стили. Поэтому, если вы применяете глубокие стили, он будет доступен абсолютно всем детям, поэтому используйте его также осторожно.