在angular4应用程序上处理RTL

Question

我是angular4的新手，是否有办法将rtlcss与ngx-翻译或直接在angular4类型记录上集成？

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

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

我已经集成了ngx翻译，但是我对RTL有一个问题，然后我来到了rtlcss.com，这似乎很好，但是我不知道如何在那里实现它，因为他们没有在文档上提供它。

如有任何建议或样品将不胜感激。谢谢。

Answer 1

RTLCss是一个用于全局包而不是依赖项的工具，您给它一个基于LTR的样式表，并得到相应的RTLCss。它还有一个简化过程的CLI：RTLSCss CLI指南。

至于使用ngx-translate处理RTL方向，我在每种语言.json文件中都有一个"dir“属性，其值为"ltr”或"rlt"，请参见这个柱塞：https://plnkr.co/edit/oPXmAS?p=preview。

使用" dir“属性，您可以设置一个具有属性dir的全局容器div，如果该值是"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将类添加到正文标记所述

Answer 2

我会用角CDK BidiModule https://material.angular.io/cdk/bidi/api来探测方向。

bidi包为组件提供了一个通用系统，用于获取和响应应用程序LTR/RTL布局方向上的更改

它应该对你有用，但与ngx翻译无关。