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，它将把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>

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

动态定义页面方向 - Angular 5

3 个答案: