如何基于语言环境加载不同样式表？（Angular i18n场景）

当然可行，而且有多种成熟的实现方式，可根据项目场景灵活选择：

方法1：通过APP_INITIALIZER动态加载样式表 #

在应用初始化阶段，根据当前语言环境判断并加载对应样式。借助Angular的LOCALE_ID令牌获取当前语言，再通过动态创建link标签的方式加载样式：

// app.module.ts
import { NgModule, LOCALE_ID, APP_INITIALIZER } from '@angular/core';

export function loadStyleBasedOnLocale(localeId: string) {
  return () => {
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = localeId === 'ar' ? './assets/styles/rtl.css' : './assets/styles/ltr.css';
    document.head.appendChild(link);
    return Promise.resolve();
  };
}

@NgModule({
  providers: [
    { provide: LOCALE_ID, useValue: 'en' }, // 实际项目中此处会根据语言切换逻辑动态赋值
    {
      provide: APP_INITIALIZER,
      useFactory: loadStyleBasedOnLocale,
      deps: [LOCALE_ID],
      multi: true
    }
  ]
})
export class AppModule { }

方法2：利用HTML的dir属性结合CSS条件样式 #

Angular i18n会自动为html标签设置dir属性（LTR语言为ltr，RTL语言为rtl），可直接基于这个属性写条件样式，无需加载单独的样式表：

/* styles.css */
.container {
  padding: 1rem;
}

html[dir="ltr"] .container {
  margin-left: 20px;
}

html[dir="rtl"] .container {
  margin-right: 20px;
}

html[dir="rtl"] .nav-menu {
  flex-direction: row-reverse;
}

这种方式更简洁，适合样式差异不大的场景，维护成本更低。

方法3：通过Angular CLI构建配置拆分样式 #

如果项目按语言打包不同构建产物，可在angular.json中为不同语言配置专属样式：

// angular.json
"architect": {
  "build": {
    "configurations": {
      "en": {
        "styles": [
          "src/styles.css",
          "src/styles/ltr.css"
        ],
        "i18nLocale": "en"
      },
      "ar": {
        "styles": [
          "src/styles.css",
          "src/styles/rtl.css"
        ],
        "i18nLocale": "ar"
      }
    }
  }
}

构建时指定对应配置即可：ng build --configuration=ar，打包后的产物会自动包含阿拉伯语对应的RTL样式。

内容的提问来源于stack exchange，提问作者Osama El-Masri