根据所选语言环境加载额外的 scss 文件或代码

Question

我正在编写一个 angular 11 通用本地化应用程序。

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

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

我google了很多，基本上都是这么说的url：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 方式来包含这些基于国家/地区的样式文件。执行这个函数的时候不太明白，怎么知道是什么语言

这是我在 angular.json

中的语言环境配置

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

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

Answer 1

你可以使用

`  
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(),
})`

Answer 2

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

我从学到了如何注入语言环境，从这里学到了很酷的方法：

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

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

根据所选语言环境加载额外的 scss 文件或代码

loading additional scss files or code based on the chosen locale

angular-universal

angular

angular-lazyloading

angular-localize