Общие стили для компонентов в приложении Angular 2

У меня есть некоторые правила CSS в моем приложении Angular 2, которое было бы общим для разных компонентов. Очевидно, я не хочу копировать и вставлять их в каждый стиль компонента. В настоящее время у меня есть 2 идеи:

Поместите общие правила CSS в статический файл CSS и включите его, используя ссылку в моем разделе index.html head.
Поместите мои общие правила CSS в один или несколько файлов и включите их в @Component decorator для каждого компонента, например. styleUrls: [ './myComponentStyle.css', '../common/common.css']

Первый подход выглядит не-so- angular -ий для меня, но в то же время он обязательно работает и прост в реализации.

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

Вы одобряете любое из этих решений или есть третий, лучший?:)

Ответ 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

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

Ответ 2

Существует 3 способа использования стиля в angular2 приложении (ссылка). Вы упомянули о двух из них, которые позволяют повторно использовать стили.

Мое личное мнение заключается в том, что для любого крупного приложения предпочтительнее переходить С# 2 в основном из-за инкапсуляции вида, предоставляемой angular.

# 1 можно использовать для действительно очень общих стилей, которые являются общими для всех частей вашего приложения. Но если вы учтете, что root в вашем SPA будет angular компонентом в любом случае - нет реальной необходимости идти с другим подходом стилей связывания, чем №2.

Кроме того, работая с css двумя разными способами, вам нужно будет запомнить это (и обработать каким-то дополнительным кодом), например, для объединения вашего приложения и использования таких инструментов, как gulp -inline-ng2-template