根据所选语言环境加载其他 scss 文件或代码答案

【问题标题】：loading additional scss files or code based on the chosen locale根据所选语言环境加载其他 scss 文件或代码
【发布时间】：2021-04-27 07:09:24
【问题描述】：

我正在编写一个带有本地化功能的 Angular 11 通用应用程序。

我想要实现的是能够根据所选的语言环境加载更多 scss 文件。

例如，如果用户选择Hebrew，它将添加styles-he.scss，即添加了direction:rtl。

我用谷歌搜索了很多，基本上都和这个网址一样：https://juristr.com/blog/2019/08/dynamically-load-css-angular-cli/

我需要在 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('styles-he.scss')

啊啊..其实教程讲了css，不知道scss能不能用。可能我必须在这种方法中使用 css。

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

这是我在 angular.json 中的语言环境配置

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

所以总的来说，我不知道根据所选语言环境添加更多样式的正确方法是什么。

【问题讨论】：

标签： angular angular-universal angular-lazyloading angular-localize

【解决方案1】：

你可以使用

` 常量语言；导出函数 getStyle(){ 返回 lang == 'ar'？ ['../../../assets/scss/ar/rtl.scss', '../../../assets/scss/ar/ar-style.scss']: ['.. /../../assets/scss/en/bootstrap.scss', '../../../assets/scss/en/en-style.scss']; } @零件（{ 选择器：'app-all-category', templateUrl: './all-category.component.html', styleUrls: getStyle(), })`

【讨论】：

lang 仍然需要填充数据。我用谷歌搜索，我可以在构造函数中注入 LOCALE_ID，但是 getStyle() 函数如何获取该语言环境？
是的 lang 仍然需要填写 .. 我没有填写它，因为“我认为您在获取样式而不是获取 lang 时遇到问题”您可以使用此 const arr = window 获取 lang .location.pathname.split("/");导出函数 getStyle(){ 返回 arr[1] == 'ar'? ['../../../assets/css/ar/rtl.scss', '../../../assets/scss/ar/ar-style.scss']: ['.. /../../assets/scss/en/bootstrap.scss', '../../../assets/scss/en/en-style.scss']; }
感谢您的帮助，但 getStyle 函数返回一个 Value 无法静态确定的错误。

【解决方案2】：

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

我从How To Use LOCALE_ID In Angular i18n Router Module 学习了如何注入语言环境，并从这里学习了很酷的方法：

change Style sheet when different language is selected.

我实际上会有一个 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;
}

就是这样！一个非常优雅的解决方案:)

【讨论】：

感谢您的贡献！）