Я пытаюсь динамически установить направление страницы (RTL или LTR) в моем проекте Angular 5.
В index.html , если я статически пишу ту или иную метку в теле тега или в селекторе 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.
Как я могу это сделать?