Angular 5 - 如何在某些路由上加载某些 css 样式（bootstrap css 仅适用于管理路由）

Question

我需要 bootstrap css 仅在以 '/admin' 开头的路由上，我已经为管理和 public 模块延迟加载。

Answer 1

为管理组件创建下面的子路由

 export const routes: Routes = [
      { path: 'home', component: HomeComponent},
      { path: 'admin', component: AdminComponent,children: [
    { path: '/user', component: AdminUserComponent }
    ]}
    ];

Answer 2

更简单的方法是使用管理组件的 styleUrls 手动 link 样式。

admin.component.ts

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

@Component({
  selector: 'app-admin',
  templateUrl: './admin.component.html',
  styleUrls: ['./admin.component.css']
})
export class AdminComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

admin.component.css

/*!
* Bootstrap v4.0.0 (https://getbootstrap.com)
* Copyright 2011-2018 The Bootstrap Authors
* Copyright 2011-2018 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
:root {
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
/* ..... rest of bootstrap.css */

Angular 5 - 如何在某些路由上加载某些 css 样式（bootstrap css 仅适用于管理路由）

Angular 5 - How to load certain css styles on certain routes (bootstrap css only for admin routes)

javascript

bootstrap-4

angular

angular-router