Wie ändere ich app wss css in Angular 2?

In meiner Anwendung habe ich verschiedene CSS-Datei wie fire.css, lake.css jede gibt anderen Blick Anwendung zu vervollständigen.Wie ändere ich app wss css in Angular 2?

Derzeit ich mit nur 1 Datei main.css umgesetzt und hinzugefügt, um diese Datei zu
index.html

<link rel="stylesheet" href="resources/styles/main.css"> 
<link rel="stylesheet" href="resources/styles/themes.css"> 
<link rel="stylesheet" href="resources/styles/common.css"> 
<link rel="stylesheet" href="resources/styles/plugins.css">

Jetzt habe ich diese dynamisch ändern wollte als Benutzer aus der Dropdown-Liste auswählen.

Meine Idee: Kopieren Sie alle CSS-Dateien zu App-Ordner und fügen dort Themen.
Ordnerstruktur ist

App
| ----- app.component.ts
| ----- app.routes.ts
| ----- main.css
| - --- lake.css
| ----- Anmelden
| ----- andere Komponenten ...

I CSS styleUrls in app.components.ts App Komponente jetzt hinzugefügt ist

import { Component } from '@angular/core'; 
import { ROUTER_DIRECTIVES } from '@angular/router'; 

@Component({ 

    selector: 'workshop-app',  
    template: ` 
     <body> 
      <router-outlet></router-outlet> 
     </body> 
    `, 
    directives : [ ROUTER_DIRECTIVES ], 
    styleUrls : ['app/lake.css'] 
}) 
export class AppComponent { }

Inhalt von Lake.css-Datei wird auf Style-Tag unter hinzugefügt, aber keine Änderungen in der App zu machen.

Quelle

2016-08-05 Sandeep Chikhale

app.component.ts http://stackoverflow.com/a/36566111/2703334 vielleicht würde dies sei hilfreich. –

fügen Sie diese dem app.component.html

<head> 
<link id="theme" rel='stylesheet' href='demo.css'>  
</head>

Fügen Sie diese

import { Component, Inject } from '@angular/core'; 
import { DOCUMENT } from '@angular/platform-browser';  
constructor (@Inject(DOCUMENT) private document) { } 
ngOnInit() { 
    this.document.getElementById('theme').setAttribute('href', 'demo2.css'); 
}

Quelle

2016-09-14 10:20:26

Ich habe es versucht und es funktioniert! –

Gute Antwort !!! Projekt wird ohne dieses Feature eingereicht Ich werde es in der Freizeit versuchen. –

glücklich, Ihnen zu helfen, wünschen Ihnen Glück –

Wie ändere ich app wss css in Angular 2?

Antwort

Verwandte Themen