在Angular 7中如何从英语（LTR）加载阿拉伯语（RTL）的CSS

Question

我正在 Angular 7 中开发一个应用程序，使用 ngx-translate 进行国际化和基于引导程序的 AdminLTE 3。我有两个 css：

1. 一种基于 LTR 的语言
2. 另一个用于基于 RTL 的语言。

当我选择了 RTL 方向的阿拉伯语时，如何加载 bootstrap_rtl.css 和卸载 bootstrap_ltr.css。

<div class="dropdown-menu dropdown-menu-sm dropdown-menu-right">
    <a class="dropdown-item" (click)="useLanguage('en')">
      English
    </a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" (click)="useLanguage('ar')">
      Arabic
    </a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" (click)="useLanguage('ta')">
      Russian
    </a>
</div>

<div class="dropdown-menu dropdown-menu-sm dropdown-menu-right">
    <a class="dropdown-item" (click)="useLanguage('en')">
      English
    </a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" (click)="useLanguage('ar')">
      Arabic
    </a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" (click)="useLanguage('ta')">
      Russian
    </a>
</div>

Answer 1

您可以在翻译文件中创建一个键作为当前主题的标志，如果它是 rtl或ltr并且此值将更改您选择的语言的基础

样式文件

.ltr {
  @import 'themes/_en';
}

.rtl {
    @import 'themes/_ar';
}

_ar.json

{
  "currentTheme":"rtl"
}

_en.json

{
  "currentTheme":"ltr"
}

应用模板

<div  [ngClass]="'currentTheme' | translate">  // 
{{'currentTheme' | translate}}
<p class="base-align">
<hello name="{{ name }}"></hello>
  Start editing to see some magic happen :)
</p>

theme <button (click)="useLanguage('en')">English</button>
<button (click)="useLanguage('ar')">Arabic</button>
</div>

当语言改变 currentTheme 的值会改变，风格也会改变

堆叠闪电战演示