Angular视图封装原理及组件按需加载公共样式方案问询

Angular的视图封装核心是隔离组件样式作用范围，避免不同组件的样式互相干扰，默认提供三种模式：

• Emulated（默认模式）：Angular会自动为组件DOM元素添加唯一属性（如_ngcontent-xxx），同时给组件样式的选择器追加对应的属性选择器。编译后的样式只会作用于当前组件的DOM节点，写法和普通CSS一致，但不会污染全局样式。
• None：完全关闭视图封装，组件样式会直接变成全局样式，作用于整个应用，容易引发样式冲突，仅适合特殊场景使用。
• ShadowDom：利用浏览器原生Shadow DOM特性，组件DOM会被包裹在独立的Shadow Root中，组件样式完全隔离在Shadow DOM内部，不会影响外部元素，兼容性取决于浏览器对Shadow DOM的支持程度。

要实现「仅访问hm1/hm2/hm3时加载样式、且仅加载一次」的需求，推荐两种可行方案：

方案一：路由守卫+全局样式管理服务 #

1. 创建全局样式加载服务 #

用来跟踪样式加载状态，避免重复加载：

import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class StyleLoaderService {
  private loadedStyleUrls = new Set<string>();

  loadStyle(url: string): Promise<void> {
    // 已加载过则直接返回成功
    if (this.loadedStyleUrls.has(url)) {
      return Promise.resolve();
    }

    return new Promise((resolve, reject) => {
      const link = document.createElement('link');
      link.rel = 'stylesheet';
      link.href = url;
      // 加载成功后记录状态
      link.onload = () => {
        this.loadedStyleUrls.add(url);
        resolve();
      };
      link.onerror = () => reject(`加载样式失败：${url}`);
      document.head.appendChild(link);
    });
  }
}

2. 创建路由守卫 #

给hm1/hm2/hm3的路由添加前置守卫，触发样式加载：

import { Injectable } from '@angular/core';
import { CanActivate } from '@angular/router';
import { StyleLoaderService } from './style-loader.service';

@Injectable({ providedIn: 'root' })
export class Common123StyleGuard implements CanActivate {
  constructor(private styleLoader: StyleLoaderService) {}

  async canActivate(): Promise<boolean> {
    try {
      // 替换为你的common123.css实际路径
      await this.styleLoader.loadStyle('assets/styles/common123.css');
      return true;
    } catch (err) {
      console.error(err);
      return false;
    }
  }
}

3. 配置路由 #

给hm1/hm2/hm3的路由绑定守卫：

const routes: Routes = [
  { path: 'hm1', component: Hm1Component, canActivate: [Common123StyleGuard] },
  { path: 'hm2', component: Hm2Component, canActivate: [Common123StyleGuard] },
  { path: 'hm3', component: Hm3Component, canActivate: [Common123StyleGuard] },
  // 其他组件路由配置...
];

用户首次访问hm1/hm2/hm3时会加载样式，后续再访问这些组件时，服务会检测到已加载状态，不会重复加载；访问hm4/hm5/hm6时，因路由未绑定守卫，不会触发样式加载。

方案二：懒加载模块捆绑样式 #

如果hm1/hm2/hm3属于同一功能模块，可通过懒加载模块实现样式按需加载：

1. 创建懒加载模块 #

将三个组件放入同一模块，并在模块中引入common123.css：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { Hm1Component } from './hm1.component';
import { Hm2Component } from './hm2.component';
import { Hm3Component } from './hm3.component';

const routes: Routes = [
  { path: 'hm1', component: Hm1Component },
  { path: 'hm2', component: Hm2Component },
  { path: 'hm3', component: Hm3Component },
];

@NgModule({
  declarations: [Hm1Component, Hm2Component, Hm3Component],
  imports: [RouterModule.forChild(routes)],
  // 引入公共样式，编译后会随模块一起懒加载
  styles: [require('./common123.css').toString()]
})
export class Hm123Module {}

2. 配置主路由懒加载 #

在主路由中设置该模块的懒加载规则：

const routes: Routes = [
  { 
    path: 'hm-group', 
    loadChildren: () => import('./hm123/hm123.module').then(m => m.Hm123Module) 
  },
  // 其他组件路由...
];

用户首次访问hm1/hm2/hm3中的任意一个时，Angular会加载整个懒加载模块，同时加载common123.css；后续访问同模块组件不会重复加载，其他组件则不会触发该样式加载。此方案适合功能关联的组件集合。

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