Laden Sie den externen CSS-Stil in Angular 2 Component

import {Component} from 'angular2/core';

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

Den external.css nicht geladen. Gibt es eine Möglichkeit zum laden der externen css-Datei in eine Eckige 2-Komponente?

Kommentar zu dem Problem
Bekommst du irgendwelche Fehler in der browser-Konsole? Kommentarautor: Günter Zöchbauer
Winkel-einfach ignorieren die externen und nicht geladen. Kommentarautor: CallMeLaNN

InformationsquelleAutor der Frage CallMeLaNN | 2015-12-31

  1. 72

    Siehe auch https://angular.io/docs/ts/latest/guide/component-styles.html

    Ansicht Kapselung

    Zugriff für externe Stile auf den Inhalt der Komponenten, die Sie ändern können, anzeigen Kapselung (das ist, was verhindert, dass Stile "ausbluten" - Komponenten). 

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

    Ansicht Kapselung erfüllt einen Zweck. Die bessere Möglichkeit ist das hinzufügen von Stilen, die direkt auf die Komponente, die Sie beeinflussen soll.
    ViewEncapsulation pro Komponente und kann sehr praktisch sein in manchen Situationen.

    "shadow piercing"

    Können Sie auch verwenden, shadow piercing CSS-combinator ::ng-deep (>>> und /deep/ veraltet sind) zu bauen, Selektoren, die cross-Komponente Grenzen wie

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

    die Stile, die alle tags mit einer Klasse ng-invalid in der aktuellen Komponente oder jeder Nachkomme mit einem roten Unterstrich egal ob Kapselung ist None oder Emulated. Es hängt davon ab, browser-Unterstützung, ob /deep/ arbeitet mit Native (soweit ich weiß, das ist nicht unterstützt von jeder browser mehr).

    Hinweis

    Schatten piercing CSS-combinators sind ähnlich denen, die von der shadow-DOM-spec, wo Sie sind veraltet schon seit geraumer Zeit.

    Mit der Standard ViewEncapsulation.Emulated Angulars eigenen /deep/ und ::shadow Umsetzung verwendet werden und Sie funktionieren auch, wenn Chrome entfernt native Unterstützung.

    Mit ViewEncapsulation.Native Winkel verwendet Chrome shadow DOM CSS-combinators (nur Chrome unterstützt Sie bei allen sowieso AFAIK). Wenn Chrome endlich entfernt werden, dann funktioniert Sie nicht in Eckige, als auch (wieder ViewEncapsulation.Native nur).

    Globale Stile

    Stile Hinzugefügt, die Global (index.html) nicht als Komponente Grenzen. Solche Stile sind nicht neu geschrieben von Angular2 und ViewEncapsulation.Emulated nicht für Sie gelten. Nur wenn ViewEncapsulation.Native gesetzt ist und der browser hat native shadow-DOM-Unterstützung, dann kann die Globale Stile, die nicht Bluten.

    Siehe auch das Verwandte Problem https://github.com/angular/angular/issues/5390

    InformationsquelleAutor der Antwort Günter Zöchbauer

  2. 2

    Könnte dies zu spät sein, hoffe, das hilft jemand anderes. Verwenden ViewEncapsulation, verwenden Sie einfach
    import { ViewEncapsulation } from '@angular/core';

    InformationsquelleAutor der Antwort Arun-

  3. 1

    Besserer Ansatz ist es hier schon geschrieben : https://stackoverflow.com/a/36265072/5219412

    Müssen Sie nur fügen Sie diese in Ihre Komponente Erklärung :

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

    Angegeben, in den eckigen Dokumentation : https://angular.io/guide/component-styles

    Hoffe, es hilft.

    InformationsquelleAutor der Antwort Nils Renaud

Schreibe einen Kommentar