Применить стиль css ко всем компонентам в приложении Angular 2

у меня есть очень простые и многоразовые правила css, такие как:

.ng-invalid {
    border-left: 5px solid #a94442;
}

.ng-valid {
    border-left: 5px solid #42A948;
}

Я хотел бы повторно использовать их для всех моих компонентов. Если я помещу это в свой корень AppComponent, который является тем, который загружается Angular, то он не распознается никакими другими компонентами в моем приложении, кроме AppComponent.

должно быть, я упускаю что-то очень очевидное.

6
angular

7 ответов

вероятно, вам следует объявить глобальные правила css в html или внешней таблице стилей.

7

Angular добавляет уникальные классы в ваш компонент и переписывает селекторы CSS, добавленные в компоненты, чтобы соответствовать только этому уникальному классу компонентов, прежде чем добавлять CSS в <head>. Это должно эмулировать инкапсуляцию стиля shadow DOM.

вы можете обойти его

  • set encapsulation: ViewEncapsulation.None что предотвращает перезапись стилей для компонентов, где инкапсуляция отключена

  • добавить CSS в index.html напрямую. Угловатый не переписывает CSS, который не добавляется к компонентам.

  • используйте "shadow piercing CSS combinator"::ng-deep someSelector { ... } что также заставляет CSS игнорировать уникальные классы, добавленные к компонентам.

9

Вы можете добиться этого, изменив свой стиль на 

:host .ng-invalid {
    border-left: 5px solid #a94442;
}

:host .ng-valid {
    border-left: 5px solid #42A948;
}

и в ваших дочерних компонентах вы можете установить свойство encapsulation: ViewEncapsulation.None (но по умолчанию это ViewEncapsulation.Нет, поэтому вам, возможно, не нужно устанавливать).

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

демо:http://plnkr.co/edit/ALgOw3FHmW8RsClI8Nnb?p=preview

1

по-моему, вы должны согласиться с определенной стратегией в этом отношении во всей команды.

Е. Г. вы можете установить encapsulation: ViewEncapsulation.None Так же, как @sreeramu, упомянутый в его ответе. Но только для компонента app (root).

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

0

вы можете написать свой CSS внутри src / styles.в CSS

или вы можете создать свой новый файл CSS и указать внутри .угловой-cli.в JSON

"apps": [
  "styles": ["styles.scss"]
]
0

из командной строки выполните:

npm установить файл-загрузчик стиль-загрузчик --save-dev

теперь в webpack.конфиг.js добавьте следующую строку в массив загрузчиков:

{ test:/\.(eot|woff2|woff|ttf|svg)/, загрузчик: 'файл-загрузчик'}

теперь в вашем приложении.деталь.ts, после инструкций импорта добавьте следующую строку:

require ('стиль!bootstrap/dist/css / bootstrap.css')

предполагается, что вы используете последнюю версию angular2 / angular2-семя, расположенное здесь:https://github.com/angular/angular2-seed по состоянию на 8 ноября 2016

0

для угловых приложений, созданных с помощью @angular/cli, css, необходимый для всех компонентов, можно поместить в styles.css файл, который присутствует в

0