有条件加载样式表 Angular 2

Question

我有一个双语网站 en 和 ar 每种语言都有自己的样式表，我想根据所选语言动态加载样式表

知道如何使用 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

您可以使用DOCUMENT来切换主题，如下所示-

    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-b ​​rowser/index/DOCUMENT-let.html