如何在Angular 2组件中条件加载不同CSS文件（适配LTR/RTL）

首先得说明：你期望的直接把AppComponentThemeProvider放到@Component的styleUrls里是不可行的——因为Angular组件的元数据（包括styleUrls）是静态编译阶段就确定的，没法依赖运行时注入的实例来动态返回样式列表。不过我们可以基于你的思路，用「服务+动态样式加载」的方式实现更优雅的条件加载，或者换用CSS变量的方案来彻底简化逻辑。

方案一：服务驱动的动态样式加载 #

这个方案贴近你原本的主题提供者思路，通过服务根据locale返回对应样式，再动态注入到页面中。

1. 定义Theme接口和主题服务 #

先创建theme.ts：

export interface Theme {
  url: string;
  rel?: string;
  media?: string;
}

然后创建全局主题服务app-theme.service.ts，负责根据当前locale返回对应的样式列表：

import { Injectable, Inject } from '@angular/core';
import { LOCALE_ID } from '@angular/core';
import { Theme } from './theme';

@Injectable({
  providedIn: 'root'
})
export class AppThemeService {
  constructor(@Inject(LOCALE_ID) private localeId: string) {}

  // 接收组件基础路径，返回对应样式列表
  getComponentThemes(componentBasePath: string): Theme[] {
    const themes: Theme[] = [{ url: `${componentBasePath}.css` }];
    // 可扩展更多RTL语言，比如ar-SA等
    if (this.localeId === 'fa-IR') {
      themes.push({ url: `${componentBasePath}.rtl.css` });
    }
    return themes;
  }
}

2. 在组件中动态加载样式 #

在app.component.ts中，用Angular的Renderer2来安全地创建link标签，加载对应样式：

import { Component, OnInit, Renderer2 } from '@angular/core';
import { AppThemeService } from './app-theme.service';
import { Theme } from './theme';

@Component({
  selector: 'ngw-root',
  templateUrl: './app.component.html',
  // 基础样式可以直接在这里声明，也可以留空交给动态加载
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(
    private renderer: Renderer2,
    private themeService: AppThemeService
  ) {}

  ngOnInit(): void {
    this.loadComponentStyles();
  }

  private loadComponentStyles(): void {
    const themes = this.themeService.getComponentThemes('./app.component');
    themes.forEach(theme => {
      const link = this.renderer.createElement('link');
      this.renderer.setAttribute(link, 'rel', theme.rel || 'stylesheet');
      this.renderer.setAttribute(link, 'href', theme.url);
      if (theme.media) {
        this.renderer.setAttribute(link, 'media', theme.media);
      }
      // 将link标签插入到页面head中
      this.renderer.appendChild(document.head, link);
    });
  }
}

方案二：CSS变量+类名切换（更推荐） #

如果你的LTR/RTL差异只是布局方向、边距、对齐这类基础样式，完全可以用CSS变量来统一管理，不需要加载两个独立的CSS文件，代码更简洁：

1. 在组件CSS中使用变量 #

app.component.css：

/* 基础LTR变量 */
:host {
  --direction: ltr;
  --padding-start: 16px;
  --padding-end: 8px;
}

/* RTL模式下覆盖变量 */
:host(.rtl) {
  --direction: rtl;
  --padding-start: 8px;
  --padding-end: 16px;
}

/* 通用样式，复用变量 */
.page-container {
  direction: var(--direction);
  padding-left: var(--padding-start);
  padding-right: var(--padding-end);
}

2. 在组件中根据locale切换类名 #

app.component.ts：

import { Component, OnInit, Inject, ElementRef } from '@angular/core';
import { LOCALE_ID } from '@angular/core';

@Component({
  selector: 'ngw-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(
    @Inject(LOCALE_ID) private localeId: string,
    private elementRef: ElementRef
  ) {}

  ngOnInit(): void {
    // 给组件宿主元素添加RTL类名
    if (this.localeId === 'fa-IR') {
      this.elementRef.nativeElement.classList.add('rtl');
      // 也可以给body加类，全局生效
      // document.body.classList.add('rtl');
    }
  }
}

为什么你原来的方案不够理想？ #

你用require('style-loader!./app.component.rtl.css')的方式存在几个问题：

• 强依赖style-loader，如果后续构建配置变化（比如调整Angular CLI的webpack配置），很容易出问题；
• 样式是全局注入的，没法利用Angular的组件样式隔离特性；
• 逻辑和组件代码耦合度高，不利于维护和扩展。

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