在 Angular 4 应用程序中处理 RTL

Question

我是 angular4 的新手，有没有办法将 rtlcss 与 ngx-translate 集成在一起或直接在 angular4 typescript 上集成？

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

我已经集成了 ngx-translate 但我遇到了 RTL 问题然后我来到 rtlcss.com 这似乎很好但我没有如何在那里实现它，因为他们没有在文档中提供它。

如有任何建议或示例，我们将不胜感激。谢谢。

Answer 1

RTLCss 是一个旨在用作全局包而不是依赖项的工具，你给它一个基于 LTR 的样式表，你就会得到相应的 RTL css。它还有一个简化过程的 CLI： RTLSCss CLI Guide.

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

有了那个"dir" 属性，你可以设置一个全局容器div，它的属性 dir 具有那个 "dir" 值，也可以添加一个特殊的 class 如果该值为 "rtl" （请参阅前面的 plunker）。您可以为 "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 中注入一个渲染器，如本答案中所述：

Answer 2

我会使用 Angular CDK BidiModule https://material.angular.io/cdk/bidi/api 来检测方向

The bidi package provides a common system for components to get and respond to change in the application's LTR/RTL layout direction

它应该适合你，但它与 ngx-translate 无关

在 Angular 4 应用程序中处理 RTL

Handling RTL on angular4 application

right-to-left

ngx-translate

angular