我有一个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
}
禁用和启用是因为浏览器倾向于缓存您的样式,并且为了使它们启用或禁用,您将更改该属性
