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

发布时间：2020-12-17 07:24:53 所属栏目：安全来源：网络整理

导读：我有一个Angular2应用程序,它需要支持多种语言.其中一些语言可能是RTL(即波斯语),有些语言可能是LTR(即英语).除了本地化字符串之外,我还需要根据语言的方向设置组件的样式. 现在using this helper,我可以有两个单独的文件(即app-rtl.scss app-ltr.scss),它们

我有一个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文件并设置封装：ViewEncapsulation.None,使其成为全局样式.然后我使用* ngIf在我的根组件模板中初始化它们,并检查语言是否为LTR.

这将适用于第一页加载,因为只有一个组件(比如组件LTR)处于活动状态,但只要您更改语言(即第二个组件(RTL)变为活动状态,因此LTR被删除),那么与之关联的样式LTR停留在页面上,不会被删除.那么你在你的页面上有RTL和LTR样式,这是不打算的.

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

加上

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
 }

禁用和启用是因为浏览器倾向于缓存您的样式,并且为了使它们启用或禁用,您将更改该属性

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!