조건부 로딩 스타일 시트 각도

Question

이 나는 ​​욕실 이중 언어 웹 사이트를했습니다 각 언어는 자신의 스타일을 가지고 있고 동적으로 선택된 언어

구현하는 방법의 아이디어를 기반으로 스타일 시트를로드하고 싶습니다 아칸소 등 Angular2를 사용하여 요구 사항? 여기

구성 요소의 장식

@Component({ 

selector: 'recent-recognition', 
template: require('./recent.recognition.component.html'), 
styles: 
[ 
    //I want to load only one of these based on if condition 
    require('./recent.recognition.component.css'), 
    require('./recent.recognition.component.ar.css') 
] 
}) 

나는 또한 현재 언어를 포함하고 성공적으로이 구성 요소에서 참조 translate.service을 가지고있다.

Answer 1

당신은 this-

import { Component, Inject } from '@angular/core'; 
    import { DOCUMENT } from '@angular/platform-browser'; 

    @Component({ 
      selector: 'app-root', 
      template: ` 
       <label class="switch"> 
       <input type="checkbox" [checked]="theme" (change)="toggleTheme($event)"> 
       <div class="slider round"></div> 
       </label> 
      `, 
    }) 

    export class SomeComponent { 

    constructor (@Inject(DOCUMENT) private document) { } 

    toggleTheme(e: any) { 
    this.theme = !this.theme; 

    if(this.theme) { 
      this.document.getElementById('theme').setAttribute('href', 'condition1.css'); 
    } 
    else { 
      this.document.getElementById('theme').setAttribute('href', 'condition2.css'); 
    } 

    } 
} 

참조처럼 테마를 전환 할 문서을 사용할 수 https://angular.io/docs/ts/latest/api/platform-browser/index/DOCUMENT-let.html