带有L10n lib的角度7 rtl和ltr手柄

Question

我正在使用7号角和L10n本地化lib从ar转换为en并从en反向转换为ar，并且此转换成功运行而没有问题

但是，当我选择ar时，LTR和RTL上的问题无法解决，无法从左向右交换。

我尝试使用ng-class：

ng-class="lang.selectedLanguage === 'en' ? 'left-text' : 'right-text'"

但不起作用。

这是app.module代码：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { HttpClientModule } from '@angular/common/http';
import { L10nConfig, L10nLoader, TranslationModule, StorageStrategy, 
 ProviderType, LogLevel } from 'angular-l10n';
import { NgClass } from '@angular/common';


const l10nConfig: L10nConfig = {
  logger: {
    level: LogLevel.Warn
  },
  locale: {
    languages: [
      { code: 'en', dir: 'ltr' },
      { code: 'ar', dir: 'rtl' }
    ],
    language: 'en',
    storage: StorageStrategy.Cookie
  },
  translation: {
    providers: [
      { type: ProviderType.Static, prefix: './assets/locale-' }
    ],
    caching: true,

    composedKeySeparator: '.',
    missingValue: 'No key'
  }
};


@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    TranslationModule.forRoot(l10nConfig)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {


  constructor(public l10nLoader: L10nLoader) {



    this.l10nLoader.load();



  }}

这是app.component.ts：

import { Component } from '@angular/core';

import { LocaleService, TranslationService, Language } from 'angular-l10n';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @Language() lang: string;

  title: string;

  constructor(public locale: LocaleService, public translation: TranslationService) { }

  ngOnInit(): void {
    this.translation.translationChanged().subscribe(
      () => { this.title = this.translation.translate('title'); }
    );
  }

  selectLanguage(language: string): void {
    this.locale.setCurrentLanguage(language);
  }
}

和app.component.html

<h1   [ngClass]="lang.selectedLanguage === 'en' ? 'left-text' : 'right-text'">{{ title }}</h1>

<h3   [ngClass]="lang.selectedLanguage === 'en' ? 'left-text' : 'right-text'">{{ 'changeLanguage' | translate:lang }}</h3>

<button (click)="selectLanguage('en');">English</button>
<button (click)="selectLanguage('ar');">عربي</button>

请帮忙??????