web-dev-qa-db-ja.com

Angular 7）英語（LTR）からアラビア語（RTL）のCSSをロードする方法

私はAngular 7で国際化のためにngx-translateを使用し、bootstrapベースのAdminLTE3を使用してアプリケーションを開発しています。2つのcssがあります。

  1. LTRベースの言語用に1つ
  2. rTLベースの言語用にもう1つ。

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>

export class NavbarComponent implements OnInit {
  constructor(private translate: TranslateService) { }
  ngOnInit() {
  }

  useLanguage(language: string) {
    this.translate.use(language);
  }
}
javascripthtmlcssangulartypescript
5
MOHAMMED SADULLAH

rtlまたはltrの場合、現在のテーマのフラグとして翻訳ファイルにキーを作成できます。この値により、選択した言語のベースが変更されます。

style.scss

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

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

_ar.json

{
  "currentTheme":"rtl"
}

_en.json

{
  "currentTheme":"ltr"
}

app.template

<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の値が変更され、スタイルが変更されます

デモ????????

2
malbarmavi