Как перейти на <html = "rtl"> из компонента? - PullRequest
Новая
       15

Как перейти на <html = "rtl"> из компонента?

0 голосов
/ 03 сентября 2018

Я использую Angular 6 и ngx-translate. Единственный способ переключиться на RTL без проблем темы - <html dir="rtl"> в index.html.

В component.ts: 

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

Как добавить dir="rtl" к <html>, если language === "ar", иначе удалить?

Ответы [ 2 ]

0 голосов
/ 03 сентября 2018

Я забыл упомянуть, что изменение rtl с div не будет работать, я проверил, что перед тем, как задавать вопрос, единственный способ правильно переключить тему - это добавить ее в <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);

  }

Если у кого-нибудь есть лучшее решение, дайте мне знать, я возьму голос и, конечно, приму ваше.

0 голосов
/ 03 сентября 2018

вы можете прочитать форму ввода HTML-тег, и создайте глобальную переменную для языка, так что вы сможете изменить ее и с помощью логики.

и вы можете просто использовать связывание в ваших компонентах: 

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