在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无关