Bedingtes Laden Sheet Angular 2

Question

Ich habe eine zweisprachige Website en und ar jede Sprache ein eigenes Stylesheet haben, und ich möchte dynamisch das Stylesheet auf der gewählten Sprache

jede Idee basiert laden, wie solche zu implementieren ein Anforderung durch Verwendung von Angular2?

hier ist die Komponente Dekorateur

@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') 
] 
}) 

Ich habe translate.service auch die aktuelle Sprache enthält und in dieser Komponente erfolgreich verwiesen.

Answer 1

Sie DOCUMENT verwenden könnte Thema wie 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'); 
    } 

    } 
} 

Referenz zu wechseln: https://angular.io/docs/ts/latest/api/platform-browser/index/DOCUMENT-let.html