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

如何解决根据所选语言环境加载其他 scss 文件或代码

我正在编写一个具有本地化功能的 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/"
          }
        }
      },

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

解决方法

好的，所以我在 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;
}

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

,

你可以使用

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