Charger le style CSS externe en composante angulaire 2

import {Component} from 'angular2/core';

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

le external.css ne charge pas. Y a-t-il un moyen de charger la css externe dans un composant angulaire 2?

42
demandé sur danday74 2015-12-31 09:29:15

4 réponses

Voir aussi https://angular.io/docs/ts/latest/guide/component-styles.html

voir encapsulation

pour permettre aux styles externes d'affecter le contenu des composants, vous pouvez changer l'encapsulation de la vue (c'est ce qui empêche les styles de" se faufiler " dans les composants). 

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

voir encapsulation remplit un but. La meilleure façon est d'ajouter des styles directement à la composante ils devraient affecter. ViewEncapsulation est défini par composant et peut être utile dans certaines situations.

de l'ombre "piercing"

vous pouvez également utiliser shadow piercing CSS combinator ::ng-deep ( >>> et /deep/ sont dépréciés) pour construire des sélecteurs qui traversent les limites des composants comme 

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

qui décline toutes les étiquettes avec une classe ng-invalid dans la composante actuelle ou tout descendant avec un soulignement rouge, peu importe si l'encapsulation est None ou Emulated . Il dépend de la prise en charge du navigateur si /deep/ fonctionne avec Native (aussi loin comme je le sais ce n'est plus pris en charge par aucun navigateur).

Note

les combinateurs shadow piercing CSS sont similaires à ceux de la shadow DOM spec où ils sont dépréciés depuis un certain temps.

avec la mise en œuvre par défaut ViewEncapsulation.Emulated Angulars propres /deep/ et ::shadow sont utilisés et ils fonctionneront même lorsque Chrome supprime natif soutien.

avec ViewEncapsulation.Native Angular utilise des combinateurs Chromes shadow DOM CSS (seul Chrome les supporte de toute façon AFAIK). Si Chrome les enlève finalement, alors ils ne fonctionneront pas aussi bien en angle (encore une fois ViewEncapsulation.Native seulement).

"1519250920 Globale" styles

Styles ajoutés globalement ( index.html ) ne tenez pas compte des limites des composantes. De tels styles ne sont pas réécrits par Angular2 et ViewEncapsulation.Emulated ne s'applique pas à eux. Seulement si ViewEncapsulation.Native est défini et que le navigateur a le support natif shadow DOM, alors les styles globaux ne peuvent pas se vider.

Voir Aussi ce numéro connexe https://github.com/angular/angular/issues/5390

74
répondu Günter Zöchbauer 2018-09-15 09:04:56

tout d'abord - le styles / styleUrls ne doit être utilisé que pour toute règle css qui affecte directement le style de l'élément de votre modèle.

La raison de votre extérieur.css ne s'applique pas à votre composant est parce que lorsque vous chargez ces règles dans externe.css de styleUrls ou styles , lors de la compilation, angular2 ajouter un composant unique identifiant comme d'attribution sélecteur d'origine sélecteur.

Par exemple, dans votre externe.css , s'il y a une règle comme div.container { /*some rules*/ } , elle deviendra div.container[_ngcontent-cds-2] { /*some rules*/ } . Donc peu importe à quel point vous essayez de forcer vos règles à devenir des règles de priorité, par exemple ajouter !important tag, cela ne va pas fonctionner -- tous les sélecteurs dans votre externe.les css ont été limités à un niveau pour le sélecteur d'attribut, seul l'élément composant porte le même attribut. C'est ainsi que angular2 restreint les styles à la seule composante courante.

bien sûr, il y a toujours une solution.

voici ma solution -- je vais ajouter un service de ressources externes, pour tout le script js, il va utiliser SystemJS pour charger soit AMD soit globalement, pour tous les fichiers css, Il va utiliser javascript simple pour créer un élément <link> et l'ajouter à l'élément <head> .

voici un morceau de mon code pour vous 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);
}
8
répondu Zhenyang Hua 2016-01-23 06:06:11

cela pourrait être en retard, j'espère que cela aidera quelqu'un d'autre. Pour utiliser ViewEncapsulation, il suffit d'utiliser import { ViewEncapsulation } from '@angular/core';

3
répondu Arun- 2018-04-02 12:30:52

meilleure approche est déjà affiché ici: https://stackoverflow.com/a/36265072/5219412

vous n'avez qu'à ajouter ceci dans la déclaration de votre composant: 

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

comme spécifié dans la documentation angulaire: https://angular.io/guide/component-styles

J'espère que ça aidera.

1
répondu Nils Renaud 2017-12-08 18:32:25