以角度加载多种语言的多种样式的最佳实践答案

【问题标题】：best practice for load multiple style for multiple language in angular以角度加载多种语言的多种样式的最佳实践
【发布时间】：2021-01-08 06:51:54
【问题描述】：

我用Angular 创建了一个SPA。

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

英语： ltr 和波斯语： rtl。

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

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

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

我想使用最佳实践来加载一般样式并通过所选语言加载自定义样式。

请告诉我这样做的最佳做法。 . .

【问题讨论】：

标签： html css angular webpack sass

【解决方案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 文件中为每种语言创建两个单独的应用程序。

【讨论】：

【解决方案2】：

根据语言向正文标签添加一个类

<body class="ltr">

或

<body class="rtl">

然后在css中

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

【讨论】：