动态定义页面方向 - Angular 5

Question

我正在尝试在我的 Angular 5 项目上动态设置页面方向（RTL 或 LTR）。

在index.html中，如果我在 body 标签或 app-root 选择器中静态写入一个或另一个，工作正常。

<body dir="rtl">
  <app-root></app-root>
</body>

但是，如果我尝试动态设置，例如使用名为 textDir 的变量，则什么也不会发生（它保持标准值，LTR 值）：

index.html

<body [dir]="textDir">
  <app-root></app-root> <!-- I tried also <app-root [dir]="textDir"></app-root> with no success -->
</body>

app.component.ts

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

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

  public textDir;    
  lang = sessionStorage.getItem("lang");    

  constructor() { 

    if(this.lang === "he"){
      this.textDir = 'rtl';
    }
    else {
      this.textDir = 'ltr';
    }
    console.log(this.textDir); 
  }

}

console.log根据条件显示正确的方向，但对index.html没有影响。我该怎么做？

Answer 1

index.html 中没有完成模板绑定。为此，您必须在 app.component.html 中创建一个根元素，例如：

app.component.html

<div [dir]="textDir">
  <!-- rest of app template -->
</div>

Answer 2

您可以在您的应用程序组件承包商中使用 document.dir，它会将目录设置为您的 html 标记，并可以使用变量

传递它

direction : string = "rtl";
constructor() {
  document.dir = this.direction;
}

Answer 3

在 Mustafa saeed's link 之后，我在 mgx-translate switchLang() 的翻译函数中编写了以下代码。

import { DOCUMENT } from '@angular/common';
import { Component, Inject, OnInit } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-translater',
  templateUrl: './translater.component.html',
  styleUrls: ['./translater.component.scss']
})
export class TranslaterComponent implements OnInit {

  constructor(public translate: TranslateService, @Inject(DOCUMENT) private document: Document) { }

  ngOnInit(): void {
    this.translate.addLangs(['en', 'ar']);
    this.translate.setDefaultLang('en');
  }

  switchLang(lang: string) {
    const htmlTag = this.document.getElementsByTagName("html")[0] as HTMLHtmlElement;
    htmlTag.dir = lang === "ar" ? "rtl" : "ltr";
    htmlTag.lang = lang;
    this.translate.use(lang);
  }

}

translater.component.html

<select #selectedLang (change)="switchLang(selectedLang.value)">
  <option *ngFor="let language of translate.getLangs()" [value]="language"
      [selected]="language === translate.currentLang">
      {{ language | uppercase }}
    </option>
</select>

因为我使用的是内置支持 rtl-ltr directions 的 ngx-foundation，所以我不必再使用 css..

动态定义页面方向 - Angular 5

Defining page direction dynamically - Angular 5

javascript

direction

angular