angular - 根据用户的语言在 angular2 应用程序中动态加载不同的 css 文件

Question

我有一个 Angular2 应用程序，它需要支持多种语言。其中一些语言可能是 RTL(即波斯语)，而另一些则是 LTR(即英语)。除了本地化字符串外，我还需要根据语言的方向来设计我的组件。

现在using this helper ，我可以有两个单独的文件(即 app-rtl.scss 和 app-ltr.scss)，它们都导入一个 scss 文件(即 app.scss)，这允许我在一个地方编写我的 scss 代码并自动输出两个文件;每个方向一个。

现在的问题是我需要根据用户的语言以某种方式引用合适的 css 文件。所以如果用户的语言是英语那么我应该 <link href="app-ltr.css" rel="stylesheet">在标题中，如果它是 RTL，<link href="app-rtl.css" rel="stylesheet"> .此外，我想将 Bootstrap 添加到我的项目中，它还有两个不同的 LTR 和 RTL 输出文件。

有什么干净的方法可以实现这个功能吗？

我尝试过的:

我创建了两个没有任何模板的虚拟组件(一个用于 LTR，一个用于 RTL)，然后使用 styleUrls 分配相应的 scss 文件并设置 encapsulation: ViewEncapsulation.None使其成为一种全局风格。然后我在我的根组件模板中使用 *ngIf 初始化它们并检查语言是否为 LTR。

这将在第一个页面加载时起作用，因为只有一个组件(假设组件 LTR)处于事件状态，但是一旦您更改语言(即第二个组件 (RTL) 变为事件状态，因此 LTR 被删除)然后与 LTR 关联的样式保留在页面上，不会被删除。因此，您的页面上同时具有 RTL 和 LTR 样式，这不是预期的。

Answer 1

您需要有条件地从浏览器中添加或删除样式:

添加

loadIfNot(url,cssId){

     if (!document.getElementById(cssId)){
        var head  = document.getElementsByTagName('head')[0];
        var link  = document.createElement('link');
        link.id   = cssId;
        link.rel  = 'stylesheet';
        link.type = 'text/css';
        link.href = url;
        link.media = 'all';
        head.appendChild(link);
    }else{
        document.getElementById(cssId).disabled = false;///i fit's already there, enable it
    }

  }

并删除

 disable(cssId){
     document.getElementById(cssId).disabled = true
 }

Disable 和 Enable 是因为浏览器倾向于缓存您的样式，为了使它们启用或禁用，您需要更改该属性