example - Cargue el estilo css externo en Angular 2 Component

css in angular

Question

import {Component} from ''angular2/core'';

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

El external.css no se carga. ¿Hay alguna forma de cargar el css externo en un componente Angular 2?

Answer 1

Esto podría ser tarde, espero que esto ayude a alguien más. Para usar ViewEncapsulation, simplemente use import { ViewEncapsulation } from ''@angular/core'';

Answer 2

Un mejor enfoque ya está publicado aquí: https://.com/a/36265072/5219412

Solo tiene que agregar esto en la declaración de su componente:

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

Como se especifica en la documentación angular: https://angular.io/guide/component-styles

Espero eso ayude.

Answer 3

Ver también https://angular.io/docs/ts/latest/guide/component-styles.html

Ver encapsulación

Para permitir que los estilos externos afecten el contenido de los componentes, puede cambiar la encapsulación de la vista (eso es lo que evita que los estilos se "mezclen" en los componentes).

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

Ver encapsulación cumple un propósito. La mejor manera es agregar estilos directamente al componente que deberían afectar. ViewEncapsulation se establece por componente y puede ser útil en algunas situaciones.

"piercing de sombra"

También puede usar el combinador CSS de perforación de sombras ::ng-deep ( >>> y /deep/ están en desuso) para crear selectores que crucen los límites de los componentes como

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

• update ::slotted ahora es compatible con todos los navegadores nuevos y se puede usar con `ViewEncapsulation.ShadowDom
  https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted

que aplica estilos a todas las etiquetas con una clase ng-invalid en el componente actual o cualquier descendiente con un subrayado rojo sin importar si la encapsulación es None o Emulated . Depende del soporte del navegador si /deep/ funciona con Native (que yo sepa, esto ya no es compatible con ningún navegador).

Nota

Los combinadores CSS de perforación de sombras son similares a los de la especificación DOM de sombra donde están en desuso desde hace bastante tiempo.

Con el ViewEncapsulation.Emulated predeterminado, se ViewEncapsulation.Emulated angulares ViewEncapsulation.Emulated implementación propia /deep/ y ::shadow y funcionarán incluso cuando Chrome elimine el soporte nativo.

Con ViewEncapsulation.Native Angular utiliza los combinadores de CSS DOM de sombra de ViewEncapsulation.Native (solo Chrome los admite de todos modos AFAIK). Si Chrome finalmente los elimina, no funcionarán también en Angular (nuevamente ViewEncapsulation.Native solamente).

Estilos globales

Los estilos agregados globalmente ( index.html ) no consideran los límites de los componentes. Angular2 y ViewEncapsulation.Emulated no reescriben dichos estilos. ViewEncapsulation.Emulated no se aplica a ellos. Solo si ViewEncapsulation.Native está configurado y el navegador tiene soporte DOM nativo de sombra, entonces los estilos globales no pueden sangrar.

Consulte también este tema relacionado https://github.com/angular/angular/issues/5390

Answer 4

En primer lugar , los styles / styleUrls solo deben usarse para cualquier regla css que afecte directamente el estilo del elemento desde su plantilla.

La razón por la que su external.css no se aplica a su componente es porque cuando carga estas reglas en external.css desde styleUrls o styles , al compilar, angular2 agregará un identificador de componente único como el selector de atribución a sus selectores originales.

Por ejemplo, en su external.css, si hay una regla como div.container { /*some rules*/ } , se convertirá en div.container[_ngcontent-cds-2] { /*some rules*/ } . Entonces, no importa cuán duro intente forzar que sus reglas se conviertan en reglas de prioridad, por ejemplo, agregar etiqueta !important , no va a funcionar: todos los selectores en su external.css se han restringido un nivel al selector de atributos, solo el elemento componente lleva El mismo atributo. Así es como angular2 restringe los estilos a solo el componente actual.

Por supuesto, siempre hay una solución alternativa.

Aquí está mi solución: SystemJS un servicio de recursos externos, para todo el script js, usará SystemJS para cargar AMD o Globalmente, para todos los archivos css, usará javascript simple para crear un <link> elemento y añádelo al elemento <head> .

Aquí hay una parte de mi código para su consideración:

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);
}