in Angular 2 App auf alle Komponenten Bewerben CSS Stil

ich sehr einfach haben, und wieder verwendbare CSS-Regeln, wie zum Beispiel:in Angular 2 App auf alle Komponenten Bewerben CSS Stil

.ng-invalid { 
    border-left: 5px solid #a94442; 
} 

.ng-valid { 
    border-left: 5px solid #42A948; 
}

Ich mag würde für Komponenten all meinen diese wieder zu verwenden. Wenn ich dies in meine Wurzel AppComponent, die von Angular Bootstrapped ist, dann wird es von anderen Komponenten in meiner Anwendung außer der AppComponent nicht erkannt.

Ich muss etwas sehr offensichtlich hier fehlen.

Quelle

2016-04-14 mariocatch

Wahrscheinlich sollten Sie globale CSS-Regeln in Ihrem HTML- oder externen Stylesheet deklarieren.

Quelle

2016-04-14 20:44:22 kemsky

Ich glaube, ich auch dachte, ** Angular ** darüber. Ja, du hast recht, haha. – mariocatch

Sie können diese achive mein Stil zu

:host .ng-invalid { 
    border-left: 5px solid #a94442; 
} 

:host .ng-valid { 
    border-left: 5px solid #42A948; 
}

und in Ihrem Kind Komponenten Ändern Sie Eigentum von encapsulation: ViewEncapsulation.None (standardmäßig aber es ist ViewEncapsulation.None, so dass Sie keine Notwendigkeit, auch einstellen kann) eingestellt werden.

Jetzt sollten Sie in der Lage sein, Ihre Stilklasse in allen untergeordneten Komponenten zu verwenden.

Demo: http://plnkr.co/edit/ALgOw3FHmW8RsClI8Nnb?p=preview

Quelle

2016-04-14 21:31:55 sreeramu

Angular fügt einzigartige Klassen zu Ihrer Komponente und umschreibt die Selektoren von CSS-Komponenten nur Spiel hinzugefügt, die Komponenten einzigartige Klasse, bevor die CSS zum <head> hinzufügen. Dies emuliert die Schatten-DOM-Stil-Kapselung.

Sie können

gesetzt encapsulation: ViewEncapsulation.None um ihn herum arbeiten, die für Komponenten Umschreiben Arten verhindert, wo Verkapselung
fügen Sie die CSS zum index.html direkt deaktiviert ist. Angular schreibt CSS, das nicht zu Komponenten hinzugefügt wird, nicht neu.
Verwenden Sie "Shadow piercing CSS-Kombinator" * >>> someSelector { ... }, die auch die CSS ignoriert die eindeutigen Klassen zu den Komponenten hinzugefügt.
Hinweis: /deep/ ist ein Alias zu >>>, funktioniert aber besser mit SASS.

Quelle

2016-04-15 05:38:47

in einer Befehlszeile:

npm installieren Datei-loader Stil-loader --save-dev

Jetzt in webpack.config.js fügen Sie die folgende Zeile in dem Array Lader:

{Test: /\.(eot|woff2|woff|ttf|svg)/, loader: 'Datei-loader'}

Jetzt in Ihrem app.component.ts, nach dem Import-Anweisungen, fügen die folgende Zeile:

require ('style! Bootstrap/dist/css/bootstrap.CSS')

Dies vorausgesetzt, dass Sie die neueste Version von angular2/angular2-Samen hier wohnen, mit: https://github.com/angular/angular2-seed ab 8. November 2016

Quelle

2016-11-08 10:08:35 SlimSim

Meiner Meinung Sie zu einer bestimmten Strategie in dieser Hinsicht in Ihrem gesamten zustimmen sollte Mannschaft.

z. Sie könnten encapsulation: ViewEncapsulation.None genau wie @sreeramu in seiner Antwort erwähnt setzen. Aber nur für App (Root) -Komponente.

Sie sollten die Vorteile der CSS-Kapselung so gut wie möglich nutzen, daher ist es für einige Komponenten etwas unangenehm. Es kann jedoch gut funktionieren, sie nur auf eine Komponente anzuwenden.

Quelle

2017-03-29 07:34:39 marekozw

Sie können Ihre CSS innerhalb src/styles.css schreiben

oder Sie können Ihre neue CSS-Datei erstellen, und geben Sie innerhalb .angular-cli.json Datei

"apps": [ 
    "styles": ["styles.scss"] 
]

Quelle

2017-07-06 06:47:41

in Angular 2 App auf alle Komponenten Bewerben CSS Stil

Antwort

Verwandte Themen