在angular4應用程序上處理RTL

Question

我是angular4的新手，有沒有辦法將rtlcss與ngx-translate集成在一起或直接在angular4打字稿上集成？

RTLCSS： http： //rtlcss.com/learn/

ngx-translate： https ：//www.npmjs.com/package/@ngx-translate/core

我已經集成了ngx-translate，但是我對RTL有問題，然后來到rtlcss.com ，這似乎很好，但是由於他們沒有在文檔中提供它，所以我不打算在那里實現它。

任何建議或樣品將不勝感激。 謝謝。

Answer 1

RTLCss是一種旨在用作全局包而不是依賴項的工具，您給它提供了一個基於LTR的樣式表，並獲得了相應的RTL css。 它還具有一個可以簡化過程的CLI ： RTLSCss CLI指南 。

至於使用ngx-translate處理RTL方向，我在每種語言.json文件中都有一個“ dir”屬性，其值是“ ltr”或“ rlt”，請參見以下代碼： https ://plnkr.co/edit / oPXmAS？p =預覽

使用該“ dir”屬性，您可以設置一個全局容器div，該容器的dir屬性具有該“ dir”值，並且如果該值是“ rtl”，則可以向其添加一個特殊類（請參閱前面的插件）。 您可以為“ rtl”語言設置任何特殊的css屬性（字體系列，大小...）。

@Component({
  selector: 'my-app',
  template: `
  <div dir="{{ 'dir' | translate }}" [class.rtl]="('dir' | translate) === 'rtl'">
    <h2>{{ 'HOME.TITLE' | translate }}</h2>
    <label>
      {{ 'HOME.SELECT' | translate }}
      <select #langSelect (change)="translate.use(langSelect.value)">
        <option *ngFor="let lang of translate.getLangs()" [value]="lang" [selected]="lang === translate.currentLang">{{ lang }}</option>
      </select>
    </label>
  </div>
  `,
  styles: ['.rtl { color: red; }']
})

如果您不想使用全局div並將其設置在body標簽中，則必須在app.component中注入一個rendrer，如此答案中所述： Angular2將class添加到body標簽

Answer 2

我將使用Angular CDK BidiModule https://material.angular.io/cdk/bidi/api來檢測方向

bidi軟件包為組件提供了一個通用系統，以獲取和響應應用程序的LTR / RTL布局方向的更改。

它應該為您工作，但與ngx-translate無關