根据用户语言在angular2应用程序中动态加载不同的CSS文件 [英] Dynamically load different css files in angular2 application based on user's language

问题描述

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

I have an Angular2 application and it need to support multiple languages. Some of these languages may be RTL (i.e Persian) and some will be LTR (i.e. English). Apart from localizing strings, I need to style my components based on the direction of the language.

现在使用此帮助程序，我可以拥有两个单独的文件(即app-rtl .scss& app-ltr.scss)，它们都导入一个单独的scss文件(即app.scss)，使我可以在一个地方编写我的scss代码并自动输出两个文件；每个方向一个.

Now using this helper, I can have two separate files (i.e. app-rtl.scss & app-ltr.scss) which both import a single scss file (i.e. app.scss) which allows me to write my scss code in one place and automatically output two files; one for each direction.

现在的问题是，我需要基于用户的语言以某种方式引用合适的css文件.因此，如果用户的语言是英语，那我应该 标头中的<link href="app-ltr.css" rel="stylesheet">，如果是RTL，则为<link href="app-rtl.css" rel="stylesheet">.此外，我想将引导程序添加到我的项目中，并且该引导程序还具有两个不同的LTR和RTL输出文件.

The problem is now I need to somehow reference the suitable css file based on the user's language. So if the user's language is English then I should have <link href="app-ltr.css" rel="stylesheet"> in the header and if it's RTL, <link href="app-rtl.css" rel="stylesheet">. Furthermore I want to add bootstrap to my project and that also has two different output files for LTR and RTL.

是否有任何干净的方法来实现此功能?

Is there any clean way to achieve this functionality?

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

I've create two dummy component (one for LTR and one for RTL) without any template and then assign the respective scss file with styleUrls and set encapsulation: ViewEncapsulation.None so that it becomes a global style. Then I initialize both of them in my root component template with an *ngIf and check if the language is LTR or not.

这将在第一页加载中起作用，因为只有一个组件(例如，组件LTR)处于活动状态，但是一旦您更改了语言(即，第二个组件(RTL)处于活动状态，因此LTR被删除)，则与LTR关联的样式保留在页面上，并且不会被删除.这样一来，您的网页上就会同时出现RTL和LTR样式.

This would work on the first page load because only one component (let's say component LTR) is active, but as soon as you change the language (i.e the second component (RTL) becomes active and thus LTR is removed) then the styles associated with the LTR stays on the page and is not removed. So then you have both RTL and LTR styles on your page which is not intended.

推荐答案

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

You'd need to conditionally add or remove the style from the browser:

添加

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是因为浏览器倾向于缓存您的样式，并且为了使它们启用或禁用，您需要更改该属性

Disable and Enable is because browser tends to cache your styles, and in order to make them enable or disable, you'd change that attribute

这篇关于根据用户语言在angular2应用程序中动态加载不同的CSS文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！