在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",请参阅此plunker:https://plnkr.co/edit / oPXmAS p =预览

使用"dir"属性,您可以设置一个具有属性dir且具有"dir"值的全局容器div,如果该值为"rtl",还可以为其添加一个特殊类(请参阅上一个plunker).您可以为"rtl"语言设置任何特殊的css属性(font-family,size ...).

@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将类添加到body标签