2

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

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

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

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

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

4

2 回答 2

9

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

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

使用该“dir”属性，您可以设置一个全局容器 div，其属性 dir 具有该“dir”值，如果该值为“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 中注入一个渲染器，如此答案中所述：Angular2 add class to body tag

于 2017-09-28T15:36:34.793 回答
0

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

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

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

于 2018-12-13T14:41:14.173 回答