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?
Aucun résultat connexe trouvé
Invité:
Pour répondre aux questions, connectez-vous ou registre
4 réponses
Denis
Confirmation de:
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.
Installé pour chaque composant et peut être utile dans certaines situations.
"shadow piercing"
Vous pouvez aussi utiliser shadow piercing CSS combinator
/
et
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
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
Dans le composant actuel ou tout descendant avec les soulignements rouges, que l'encapsulation soit
ou
. Cela dépend du soutien du navigateur, que ce soit
de
/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
Angulars Propres implémentations sont utilisées
et
, et ils travailleront même quand Chrome Supprimer le support intégré.
DE
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
/.
Styles mondiaux
Styles ajoutés globalement /
/, Ne prenez pas compte des limites des composants. Ces styles ne réécrivent pas Angular2, et
Cela ne s'applique pas à eux. Seulement si le paramètre est défini
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:
-
/
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
ou
, 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
, 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
Télécharger soit AMD, Soit globalement pour tous les fichiers css Il utilisera l'habituel javascript Pour créer un article
et ajoutez-le à l'élément
.
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 < links.length; i++/ {
var node = links[i];
if /node.href.indexOf/link.href/ > -1/ {
isLoaded = true;
}
}
if /isLoaded/ return;
head.insertBefore/link, style/;
}
</head>
Blanche
Confirmation de:
import { ViewEncapsulation } from '@angular/core';Camille
Confirmation de:
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.