在 Angular 4 应用程序中处理 RTL答案

【问题标题】：Handling RTL on angular4 application在 Angular 4 应用程序中处理 RTL
【发布时间】：2018-12-13 22:41:14
【问题描述】：

我是 angular4 的新手，有没有办法将 rtlcss 与 ngx-translate 或直接集成到 angular4 打字稿上？

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

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

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

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

【问题讨论】：

标签： angular right-to-left ngx-translate

【解决方案1】：

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

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

使用该“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 中注入一个渲染器，如此答案中所述：Angular2 add class to body tag

【讨论】：

谢谢@B.Yassine。我将在 plunkr 中将您的想法用于您的示例。对我来说，这似乎是一个不错的解决方案。再次感谢。

【解决方案2】：

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

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

它应该对你有用，但它与 ngx-translate 无关

【讨论】：