앱 2 와이드 CSS를 어떻게 변경합니까?

내 응용 프로그램에서는 fire.css, lake.css와 같은 CSS 파일이 각각 다르므로 응용 프로그램을 완성하기 위해 모양이 다릅니다.앱 2 와이드 CSS를 어떻게 변경합니까?

현재, 나는 이제 사용자가 드롭 다운 목록에서 선택으로 동적으로 변경을 원에만 1 파일 main.css가 구현 및
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">

이 파일을 추가했다.

내 아이디어 : 모든 css 파일을 app 폴더에 복사하고 거기에 테마를 추가하십시오. -----이
을 app.component.ts | |
폴더 구조가

응용 프로그램
입니다 ----- app.routes.ts
| ----- main.css가
| - --- lake.css
는 | ----- 기타 구성 요소 ... 나는 app.components.ts에 styleUrls CSS를 추가

응용 프로그램 구성 요소 지금 | -----
가 로그인

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 { }

Lake.css의 콘텐츠가 스타일 태그에 추가되었지만 앱에서는 변경되지 않았습니다.

출처

2016-08-05 Sandeep Chikhale

http://stackoverflow.com/a/36566111/2703334 어쩌면이 것이 app.component.ts에 추가 app.component.html

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

이 추가 도움이 되길. –

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

출처

2016-09-14 10:20:26

나는 그것을 시험해 보았다! –

좋은 답변입니다 !!! 이 기능을 사용하지 않고 프로젝트를 제출하면 여유 시간에 사용해 보겠습니다. –

행복하게 도와주세요, 행운을 빌어주세요. –

앱 2 와이드 CSS를 어떻게 변경합니까?

답변

관련 문제