1

我正在编写一个带有本地化的 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
          }
   ...

然后我应该在以下位置创建一个 loadStyle 组件app.component.ts：

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/"
          }
        }
      },

所以总的来说，我迷失了根据所选语言环境添加更多样式的正确方法。

4

2 回答 2

1

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

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

选择不同的语言时更改样式表。

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

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

于 2021-01-29T10:05:32.963 回答
0

您可以使用

`  
常量语言；


导出函数 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(),
})`
于 2021-01-22T21:04:59.283 回答