Angular 基于所选区域设置加载其他scss文件或代码

我正在写一个带有本地化的angular 11通用应用程序

我试图实现的是能够根据所选的语言环境加载更多的

scs

文件

因此，例如，如果用户选择了

Hebrew

，它将添加添加

样式的.scss

，该样式添加了

方向：rtl

我在谷歌上搜索了很多，基本上都说这个url是一样的：

我需要在angular.json中添加新样式，这样它将被延迟加载：

 "styles": [
          "src/styles.scss",
          {
            "input": "src/styles-he.scss",
            "bundleName": "hebrewStyle",
            "inject": false
          }
   ...

然后我应该在

app.component.ts

中创建一个loadStyle组件：

loadStyle(styleName: string) {
    const head = this.document.getElementsByTagName('head')[0];

    let themeLink = this.document.getElementById(
      'client-theme'
    ) as HTMLLinkElement;
    if (themeLink) {
      themeLink.href = styleName;
    } else {
      const style = this.document.createElement('link');
      style.id = 'client-theme';
      style.rel = 'stylesheet';
      style.href = `${styleName}`;

      head.appendChild(style);
    }
  }

并随时执行

loadStyle（'style-he.scss'）

啊。。实际上，教程讨论了

css

，不知道

scss

是否有效。可能我必须在这个方法中使用css

问题是，我希望会有一种更加有角度的方式来包含这些基于国家的样式文件。我不太明白我什么时候执行这个函数，我怎么知道它是哪种语言

这是我在

angular.json

 "i18n": {
        "sourceLocale": "en",
        "locales": {
          "he": {
            "translation": "src/locale/messages.he.xlf",
            "baseHref": "he/"
          }
        }
      },

因此，一般来说，我不知道如何根据所选的区域设置添加更多样式。

您可以使用

` const lang ; export function getStyle(){ return lang == 'ar'? ['../../../assets/scss/ar/rtl.scss', '../../../assets/scss/ar/ar-style.scss']: ['../../../assets/scss/en/bootstrap.scss', '../../../assets/scss/en/en-style.scss']; } @Component({ selector: 'app-all-category', templateUrl: './all-category.component.html', styleUrls: getStyle(), })` ` 朗康斯特； 导出函数getStyle（）{ return lang=='ar'？['../../../../assets/scss/ar/rtl.scss'，'../../../assets/scss/ar/ar-style.scss']：['../../../../assets/scss/en/bootstrap.scss'，'../../../assets/scss/en/en-style.scss']； } @组成部分({ 选择器：“应用程序所有类别”， templateUrl:“./all category.component.html”， styleUrls:getStyle（）， })`

---

好的，我在stackoverflow上找到了一个很酷的解决方案

我从这里学习了如何注入区域设置和酷的方法：

我实际上会有一个css文件，但我可以从css文件本身确定语言，这实际上是一个更好的解决方案，而不是有单独的文件

这就是我所做的：

在

app.component.ts

中，我这样做了：

export class AppComponent implements OnInit, OnDestroy {
 constructor(@Inject(LOCALE_ID) private locale: string,....)

 ngOnInit(): void {
   document.documentElement.setAttribute('lang', this.locale);
 }
}

我注入了区域设置，并使用区域设置值在文档上设置了一个

lang

属性

然后。。在我的例子中，我想为网站添加从右到左的方向， 所以我编辑了app.component.scss并添加了：

[lang="he"] :host {
  direction: rtl;
}

---

就这样！一个非常优雅的解决方案：）

lang仍然需要填充数据。我用谷歌搜索了一下，我可以在构造函数中注入LOCALE_ID，但是getStyle（）函数如何获得该区域设置呢？是的，lang仍然需要填充。。我没有填写它，因为“我认为您在获取样式方面有问题，而不是在获取lang方面”您可以使用这个const arr=window.location.pathname.split（“/”）获取lang；导出函数getStyle（）{return arr[1]='ar'？['../../../../assets/css/ar/rtl.scss'，'../../../assets/scss/ar/ar-style.scss']：['../../../assets/scss/en/en-style.scss']；}感谢您的帮助，但是getStyle函数返回一个无法静态确定值的错误。感谢您的贡献！）