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

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

现在使用这个帮助器,我可以有两个单独的文件(即app-rtl.scss和app-ltr.scss),它们都导入一个scss文件(即app.scss),它允许我在一个地方写我的scss代码,自动输出两个文件; 每个方向一个.

问题是现在我需要以某种方式根据用户的语言引用合适的css文件.因此,如果用户的语言是英语,然后我应该 在头,如果它是RTL, .此外,我想为我的项目添加bootstrap,并且还有两个不同的LTR和RTL输出文件.

有没有干净的方法来实现这个功能？

我尝试过的:

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

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