Angular 4如何为多用户创建多主布局模板？

嘿，这个需求我刚好在Angular 4的项目里折腾过，给你分享几个实用的方案，按推荐度排序：

方案1：路由懒加载+模块化资源隔离（最推荐） #

这是最贴合Angular模块化理念的做法，能彻底实现资源的按需加载和隔离，不会出现全局污染的问题。

步骤详解： #

1. 拆分独立模块

   • 分别创建ClientModule和AdminModule，每个模块下配专属的布局组件（比如ClientLayoutComponent和AdminLayoutComponent），布局里要包含页眉、页脚，以及<router-outlet>用来渲染该模块下的子页面。
   • 把两类用户的子页面（比如客户端的首页、管理员的仪表盘）分别放到对应模块下，确保代码和资源的隔离。

2. 配置懒加载路由
   在根路由模块（AppRoutingModule）里设置懒加载规则，只有当用户访问对应路由时，才会加载对应的模块和资源：

   import { Routes, RouterModule } from '@angular/router';
   import { ClientLayoutComponent } from './client/client-layout/client-layout.component';
   import { AdminLayoutComponent } from './admin/admin-layout/admin-layout.component';
   
   const routes: Routes = [
     { 
       path: 'client', 
       loadChildren: './client/client.module#ClientModule', // Angular 4的懒加载语法
       component: ClientLayoutComponent
     },
     { 
       path: 'admin', 
       loadChildren: './admin/admin.module#AdminModule',
       component: AdminLayoutComponent
     },
     // 默认路由跳转到客户端登录页（可根据需求调整）
     { path: '', redirectTo: '/client/login', pathMatch: 'full' }
   ];
   
   @NgModule({
     imports: [RouterModule.forRoot(routes)],
     exports: [RouterModule]
   })
   export class AppRoutingModule { }
   

3. 模块内引入专属资源

   • CSS：直接在布局组件或子组件的styleUrls里引入专属样式，比如AdminLayoutComponent的配置：

     @Component({
       selector: 'app-admin-layout',
       templateUrl: './admin-layout.component.html',
       styleUrls: ['./admin-layout.component.css', '../../assets/css/admin-main.css']
     })
     

     Angular会在模块加载时自动注入这些样式，并且通过默认的ViewEncapsulation.Emulated机制，给样式添加专属属性选择器，不会污染其他模块的页面。
   • JS：如果是需要全局执行的脚本，可以在布局组件的ngOnInit里动态加载（参考方案2的代码）；如果是ES6模块，也可以用动态import()导入：

     ngOnInit() {
       // 动态导入并执行管理员专属JS模块
       import('../../assets/js/admin-scripts.js').then(module => {
         // 如果JS导出了初始化函数，这里调用
         // module.initAdmin();
       });
     }
     

方案2：动态加载CSS/JS资源（适合快速改造现有项目） #

如果你的项目已经成型，不想大动干戈拆分模块，可以用动态创建DOM元素的方式，在布局组件加载时加载专属资源，销毁时清理，避免残留。

代码示例： #

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-admin-layout',
  templateUrl: './admin-layout.component.html',
  styleUrls: ['./admin-layout.component.css']
})
export class AdminLayoutComponent implements OnInit, OnDestroy {
  // 存储已加载的资源元素，方便销毁时清理
  private loadedStyles: HTMLLinkElement[] = [];
  private loadedScripts: HTMLScriptElement[] = [];

  ngOnInit() {
    // 加载管理员专属CSS
    this.loadStyle('assets/css/admin-styles.css');
    // 加载管理员专属JS
    this.loadScript('assets/js/admin-scripts.js');
  }

  ngOnDestroy() {
    // 页面销毁时移除所有加载的资源，避免内存泄漏和样式污染
    this.loadedStyles.forEach(style => style.remove());
    this.loadedScripts.forEach(script => script.remove());
  }

  private loadStyle(url: string) {
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = url;
    document.head.appendChild(link);
    this.loadedStyles.push(link);
  }

  private loadScript(url: string) {
    const script = document.createElement('script');
    script.src = url;
    script.async = false; // 确保脚本按顺序加载（如果有依赖的话）
    document.body.appendChild(script);
    this.loadedScripts.push(script);
  }
}

注意：如果你的JS脚本依赖全局变量，要确保脚本加载完成后再执行相关逻辑，比如可以给script标签加onload事件。

方案3：Angular CLI多应用配置（适合完全独立的场景） #

如果两类用户的系统差异极大，几乎没有共用代码，可以在Angular CLI里配置两个独立的应用，各自拥有专属的index.html、样式和脚本，编译后是两个完全独立的包。

配置示例（修改angular-cli.json）： #

"apps": [
  {
    "name": "client",
    "root": "src",
    "outDir": "dist/client",
    "index": "index-client.html",
    "main": "main.client.ts",
    "styles": [
      "styles.css",
      "assets/css/client-styles.css"
    ],
    "scripts": [
      "assets/js/client-scripts.js"
    ]
  },
  {
    "name": "admin",
    "root": "src",
    "outDir": "dist/admin",
    "index": "index-admin.html",
    "main": "main.admin.ts",
    "styles": [
      "styles.css",
      "assets/css/admin-styles.css"
    ],
    "scripts": [
      "assets/js/admin-scripts.js"
    ]
  }
]

然后分别编译两个应用：

# 编译客户端应用
ng build --app client
# 编译管理员应用
ng build --app admin

部署时把两个包放到不同的路径即可，完全隔离资源。

最后提醒： #

• 优先选方案1，因为它最符合Angular的设计思想，维护性和扩展性最好；
• 用方案2时一定要记得在ngOnDestroy里清理资源；
• 方案3适合两类系统完全独立的情况，否则会增加重复代码的维护成本。

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