Angular 8单个组件中如何根据所选语言条件加载两个CSS样式文件

方案1：动态加载独立CSS文件（适合两套样式完全独立、体积较大的场景） #

该方法可以实现真正的按需引入CSS文件，不会提前加载冗余资源：

1. 首先把style1.css（LTR）和style2.css（RTL）放到项目assets目录下，避免构建时被打包到全局样式文件中
2. 调整弹窗调用逻辑，监听用户选择结果：

// 引入必要依赖
import { Component, AfterViewInit } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';

// 组件类内代码
private loadedStyleLink: HTMLLinkElement | null = null;

ngAfterViewInit() {
  this.dialog.open(chooseLanguageComponent)
    .afterClosed()
    .subscribe(selectedLang => {
      // selectedLang为弹窗返回的选择结果，比如'en'代表英语，'ar'代表阿拉伯语
      if (selectedLang) {
        this.switchStyle(selectedLang);
      }
    });
}

switchStyle(lang: 'en' | 'ar') {
  // 移除之前加载的样式文件
  if (this.loadedStyleLink) {
    document.head.removeChild(this.loadedStyleLink);
    this.loadedStyleLink = null;
  }
  // 创建新的样式节点
  const linkEl = document.createElement('link');
  linkEl.rel = 'stylesheet';
  linkEl.href = lang === 'en' ? 'assets/styles/style1.css' : 'assets/styles/style2.css';
  // 挂载到页面
  document.head.appendChild(linkEl);
  this.loadedStyleLink = linkEl;

  // 同步设置全局方向属性，自动适配NG-ZORRO、Angular Material的内置RTL逻辑
  document.documentElement.dir = lang === 'en' ? 'ltr' : 'rtl';
}

方案2：内置样式动态切换（适合组件专属样式、切换流畅度要求高的场景） #

不需要单独维护两个外部CSS文件，所有样式内置在组件样式中，通过全局dir属性区分适配：

1. 在组件的CSS文件中写入两套样式，用host-context关联全局方向属性：

/* LTR样式 */
:host-context([dir="ltr"]) .form-wrap {
  direction: ltr;
  /* 其他LTR专属样式，比如margin、padding左右适配 */
}

/* RTL样式 */
:host-context([dir="rtl"]) .form-wrap {
  direction: rtl;
  /* 其他RTL专属样式 */
}

2. 切换逻辑只需要修改全局方向属性即可：

switchStyle(lang: 'en' | 'ar') {
  document.documentElement.dir = lang === 'en' ? 'ltr' : 'rtl';
}

该方案没有额外网络请求，切换无延迟，天然适配NG-ZORRO和Angular Material的RTL布局规则，组件库会自动识别dir属性调整自身布局，无需额外修改组件库样式。

内容的提问来源于stack exchange，提问作者AchrafBj