Question

我用SPA创建一个Angular。

我的网站上有两种语言English和Persian：

英语： ltr和波斯语： rtl。

有时在我的网站中有时需要为rtl和ltr设置自定义样式。

例如对于lrt，我需要为div设置border-left，为此需要在border-right中设置rtl。

我的项目中有更多这个问题。

我想使用最佳做法来处理常规的加载样式，并按选定的语言加载定制样式。

请告诉我这样做的最佳实践。。

。

Answer 1

您可以这样做：

创建两个样式文件。

例如：styles-rtl.scss和styles-ltr.scss

在您的应用程序组件中为html标签创建渲染器：

您应该将其注入到构造函数中：

constructor(private translationService: TranslateService, rootRenderer: RendererFactory2
  ) {
    this.renderer = rootRenderer.createRenderer(document.querySelector('html'), null);
  }

语言更改时，将dir属性设置为html标记：

this.translationService.onLangChange.subscribe((event: LangChangeEvent) => {
      this.renderer.setAttribute(
          document.querySelector('html'), 'dir', (event.lang == 'fa') ? 'rtl' : 'ltr'
        );
    });

然后在styles.scss中导入相对的scss文件：

[dir = 'rtl'] {
  @import "styles-rtl";
}

[dir = 'ltr'] {
  @import "styles-ltr";
}

还有其他创建多语言应用程序的方法，但我发现这种方法更有效。

另一种方法是在angualr.json文件中为每种语言创建两个单独的应用。

Answer 2

根据语言将一个类添加到body标签

<body class="ltr">

或

<body class="rtl">

然后在CSS中

.ltr .my-div {
    border-left: 20px;
}
.rtl .my-div {
    border-right: 20px;
}

在角语言中为多种语言加载多种样式的最佳实践

2 个答案: