Загрузите внешний CSS-стиль в компонент Angular 2

import {Component} from 'angular2/core'; @Component({ selector: 'my-app', template: '
', styleUrls: [ 'http://domain.com/external.css', 'app/local.css' ] }) export class AppComponent {}

external.css не загружается. Есть ли способ загрузить внешний css в компоненте Angular 2?

См. Также https://angular.io/docs/ts/latest/guide/component-styles.html.

Просмотр инкапсуляции

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

 @Component({ selector: 'some-component', template: '
', styleUrls: [ 'http://example.com/external.css', 'app/local.css' ], encapsulation: ViewEncapsulation.None, }) export class SomeComponent {}

Просмотр инкапсуляции выполняет свою цель. Лучше всего добавлять стили непосредственно к компоненту, на который они должны влиять. ViewEncapsulation устанавливается для каждого компонента и может пригодиться в некоторых ситуациях.

«теневой пирсинг»

Вы также можете использовать теневой пирсинг CSS combinator ::ng-deep ( >>> и /deep/ устарели) для создания селекторов, которые пересекают границы компонентов, такие как

 :host ::ng-deep .ng-invalid { border-bottom: solid 3px red; } 

который стилирует все tags с classом ng-invalid в текущем компоненте или streamе с красным подчеркиванием независимо от того, является ли инкапсуляция None или Emulated . Это зависит от поддержки браузера: /deep/ работает с Native (насколько я знаю, это больше не поддерживается никаким браузером).

Заметка

Комбинированные теневые пирсинг-комбайнаторы похожи на те, которые используются в спецификации DOM shadow, где они устаревают с тех пор.

При использовании функции ViewEncapsulation.Emulated Angulars по умолчанию ViewEncapsulation.Emulated /deep/ и ::shadow , и они будут работать, даже если Chrome удалит встроенную поддержку.

С ViewEncapsulation.Native Angular использует Chromes shadow DOM CSS combinators (только Chrome поддерживал их вообще в любом случае AFAIK). Если Chrome, наконец, удалит их, то они не будут работать и в угловом (опять-таки ViewEncapsulation.Native ).

Глобальные стили

Стили, добавленные глобально ( index.html ), не учитывают границы компонентов. Такие стили не переписываются Angular2 и ViewEncapsulation.Emulated не относится к ним. Только если установлен параметр ViewEncapsulation.Native а браузер имеет встроенную поддержку DOM shadow, тогда глобальные стили не могут проходить.

См. Также эту связанную с этим проблему https://github.com/angular/angular/issues/5390

Прежде всегоstyles / styleUrls должны использоваться только для любых правил CSS, которые непосредственно влияют на стиль элемента из вашего шаблона.

Причина, по которой ваш external.css не получает применения к вашему компоненту, заключается в том, что при загрузке этих правил в external.css из styleUrls или styles при компиляции угловое2 добавляет уникальный идентификатор компонента, такой как селектор атрибуции к вашим исходным селекторам.

Например, в вашем div.container { /*some rules*/ } external.css, если существует такое правило, как div.container { /*some rules*/ } , он станет div.container[_ngcontent-cds-2] { /*some rules*/ } . Поэтому независимо от того, насколько сильно ваша попытка заставить ваши правила стать приоритетными правилами, например, добавить !important тег, это не сработает – все селекторы в вашем external.css были ограничены на одном уровне, чтобы атрибут селектора, только элемент компонента переносит тот же атрибут. Вот как угловой2 ограничивает стили только текущим компонентом.

Конечно, всегда есть обходной путь.

Вот мое решение: я добавлю службу внешних ресурсов, для всего js-скрипта будет использоваться SystemJS для загрузки либо AMD, либо глобально, для всех файлов css, он будет использовать простой javascript для создания и добавьте его в элемент .

Вот часть моего кода для вас:

 loadCSS(url) { // Create link let link = document.createElement('link'); link.href = url; link.rel = 'stylesheet'; link.type = 'text/css'; let head = document.getElementsByTagName('head')[0]; let links = head.getElementsByTagName('link'); let style = head.getElementsByTagName('style')[0]; // Check if the same style sheet has been loaded already. let isLoaded = false; for (var i = 0; i < links.length; i++) { var node = links[i]; if (node.href.indexOf(link.href) > -1) { isLoaded = true; } } if (isLoaded) return; head.insertBefore(link, style); } 

Это может быть поздно, надеюсь, что это поможет кому-то другому. Чтобы использовать ViewEncapsulation, просто используйте import { ViewEncapsulation } from '@angular/core';

Более эффективный подход уже размещен здесь: https://stackoverflow.com/a/36265072/5219412

Вы должны добавить это только в объявление своего компонента:

 @Component({ ... encapsulation: ViewEncapsulation.None, }) 

Как указано в угловой документации: https://angular.io/guide/component-styles

Надеюсь, поможет.

  • Фокус на вновь добавленном элементе ввода
  • Запускать функцию controllerа всякий раз, когда открывается или отображается вид
  • Angular2 - как вызвать функцию компонента извне приложения
  • Что альтернатива угловым.копиям в угловом
  • Создайте новый экземпляр classа с зависимостями, не понимая поставщика фабрики
  • Как повторить fragment HTML несколько раз без ngFor и без другого @Component
  • Angular2: как связывать для выбора нескольких
  • Включить подсказку углового ui для пользовательских событий
  • Угловой 2.0 маршрутизатор не работает при перезагрузке браузера
  • Как я могу динамически добавлять директиву в AngularJS?
  • Угловая ошибка 2: 404 возникает при обновлении через браузер
  • Давайте будем гением компьютера.