如何从组件切换到 <html="rtl">？

Question

我正在使用 Angular 6 和 ngx-translate。在不弄乱主题的情况下切换到 rtl 的唯一方法是 <html dir="rtl"> in index.html.

在component.ts中：

switchLanguage(language: string) {
  this.translate.use(language);
  localStorage.setItem('lang', JSON.stringify(language));
}

如果 language === "ar"，如何将 dir="rtl" 添加到 <html>，否则将其删除？

Answer 1

您可以阅读 html 标签的输入，并为语言创建一个全局变量，这样您也可以通过逻辑更改它。

并且您可以只使用绑定到您的组件中：

<div  [dir]="isRtl"></div>

Answer 2

我忘了说从 div 更改为 rtl 是行不通的，我在提问之前测试过，正确切换主题的唯一方法是将其添加到 <html> 你可以通过在我正在使用的 CoreUI Free Angular 2+ Admin Template 上尝试来测试它。

我设法解决了

  switchLanguage(language: string) {
    this.translate.use(language);
    if (language !== 'ar' && document.getElementsByTagName('html')[0].hasAttribute('dir')) {
      document.getElementsByTagName('html')[0].removeAttribute('dir');
    } else if (language === 'ar' && !document.getElementsByTagName('html')[0].hasAttribute('dir')) {
      document.getElementsByTagName('html')[0].setAttribute('dir', 'rtl');
    }
    localStorage.setItem('lang', language);

  }

如果有人有更好的解决方案，请告诉我，我当然会投票并接受你的。

如何从组件切换到 <html="rtl">？

How to switch to <html="rtl"> from a component?

ngx-translate

angular

angular6