Charge extérieure CSS sur composite

import {Component} from 'angular2/core';

@Component/{
selector: 'my-app',
template: '<div></div>',
styleUrls: [
'http://example.com/external.css',
'app/local.css'
]
}/
export class AppComponent {}



external.css

Ne télécharge pas.

Y a-t-il un moyen de télécharger externe CSS en composant Angular 2?
Invité:

Denis

Confirmation de:

voir également
https://angular.io/docs/ts/lat ... .html
Encapsulation de type

Pour permettre aux styles externes d'influencer le contenu des composants, vous pouvez modifier l'encapsulation de la promesse. /C'est ceci qui empêche l'apparition de styles dans les composants. "bleed into"/.


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


L'encapsulation d'application effectue un objectif spécifique. La meilleure façon d'ajouter des styles directement au composant auquel ils devraient affecter.
ViewEncapsulation

Installé pour chaque composant et peut être utile dans certaines situations.

"shadow piercing"

Vous pouvez aussi utiliser shadow piercing CSS combinator
::ng-deep

/
>>>

et
/deep/

Dépassé/ Créer des sélecteurs traversant les limites des composants, tels que


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


Mettre à jour

::slotted

Maintenant soutenu par tous les nouveaux navigateurs et peut être utilisé avec `ViewEncapsulation.ShadowDom

https://developer.mozilla.org/ ... otted
Quels stylistes toutes tags avec classe
ng-invalid

Dans le composant actuel ou tout descendant avec les soulignements rouges, que l'encapsulation soit
None

ou
Emulated

. Cela dépend du soutien du navigateur, que ce soit
/deep/

de
Native

/Autant que je sache, cela n'est plus pris en charge par aucun navigateur/.

Noter

Ombre piercing CSS Les combinaisons sont similaires à celles de l'ombre DOM Spécifications où ils ne sont pas pris en charge, depuis assez longtemps.

Lorsque vous utilisez po

défaut

ViewEncapsulation.Emulated

Angulars Propres implémentations sont utilisées
/deep/

et
::shadow

, et ils travailleront même quand Chrome Supprimer le support intégré.

DE
ViewEncapsulation.Native

Angular Les usages Chromes shadow DOM CSS combinators /seul Chrome les soutenait du tout quand même AFAIK/. Si un Chrome Enfin, retirez-les, ils ne travailleront pas dans Angular /Encore une fois, seulement dans
ViewEncapsulation.Native

/.

Styles mondiaux

Styles ajoutés globalement /
index.html

/, Ne prenez pas compte des limites des composants. Ces styles ne réécrivent pas Angular2, et
ViewEncapsulation.Emulated

Cela ne s'applique pas à eux. Seulement si le paramètre est défini
ViewEncapsulation.Native

et le navigateur a une assistance intégrée shadow DOM, Que les styles mondiaux ne peuvent pas saigner.

Voir aussi question connexe
https://github.com/angular/angular/issues/5390

Damien

Confirmation de:

D'abord

-
styles

/
styleUrls

ne devrait être utilisé que pour les règles css, Qui affectent directement le style d'élément de votre modèle.

Cause , pour lequel le vôtre external.css ne s'applique pas à votre composant, est-ce que lorsque vous téléchargez ces règles dans external.css de
styleUrls

ou
styles

, Lors de la compilation angular2 Ajoutez un identifiant de composant unique, tel qu'un sélecteur d'attribution, à vos sélecteurs source.

Par exemple, dans votre external.css, S'il y a une règle comme
div.container { /*some rules*/ }

, Ça va devenir
div.container[_ngcontent-cds-2] { /*some rules*/ }

. Par conséquent, peu importe combien vous essayez de forcer vos règles à devenir des règles prioritaires, par exemple, ajoutez une étiquette
!important

, Il ne fonctionnera pas - tous les sélecteurs de votre external.css Nous étions limités à un niveau du sélecteur d'attribut, seul l'élément composant comporte le même attribut. Exactement angular2 Limite les styles que par le composant actuel.

Bien sûr, il y a toujours une solution de contournement.

Voici ma décision, j'ajouterai le service de ressources externe, pour tous les scripts JS qu'il utilisera
SystemJS

Télécharger soit AMD, Soit globalement pour tous les fichiers css Il utilisera l'habituel javascript Pour créer un article
<link/>

et ajoutez-le à l'élément
<head>

.

Voici un fragment de mon code pour votre considération:


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 &lt; links.length; i++/ {
var node = links[i];
if /node.href.indexOf/link.href/ &gt; -1/ {
isLoaded = true;
}
}
if /isLoaded/ return;
head.insertBefore/link, style/;
}


</head>

Blanche

Confirmation de:

Il peut être tard, j'espère que cela aidera quelqu'un d'autre. Utiliser ViewEncapsulation, Juste utiliser
import { ViewEncapsulation } from '@angular/core';

Camille

Confirmation de:

La meilleure approche est déjà placée ici. :

Vous n'avez besoin que de l'ajouter aux annonces de votre composant. :


@Component/{
...
encapsulation: ViewEncapsulation.None,
}/


Comme indiqué dans la documentation angular :
https://angular.io/guide/component-styles
J'espère que cela aidera.

Pour répondre aux questions, connectez-vous ou registre