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

【问题标题】：Angular 5 - How to load certain css styles on certain routes (bootstrap css only for admin routes)Angular 5 - 如何在某些路由上加载某些 css 样式（引导 css 仅适用于管理路由）
【发布时间】：2018-10-19 08:28:19
【问题描述】：

我只在以“/admin”开头的路由上需要引导 css，我对管理和公共模块进行了延迟加载。

【问题讨论】：

如果有动态生成的内容，那么该特定组件的样式可能不起作用，因为样式也是通过虚拟 DOM 应用的。

标签： javascript angular bootstrap-4 angular-router

【解决方案1】：

为管理组件制作下面的子路由

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

【讨论】：

这种方式的样式将被加载到任何地方，例如当我转到'/home'时样式将可用，我不想要这种行为。
@ppl，如何加载css样式？

【解决方案2】：

更简单的方法是使用 styleUrls 为您的管理组件手动链接样式。

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 */

【讨论】：

这是为 Bootstrap 4 标记的，因此您可能需要考虑这一点。当然在这个例子中它并不重要。
我只是想举个例子，反正我已经改成了Bootstrap 4
这会起作用，但是对于管理部分中的每个组件，我都必须手动添加它，我想更多的是在开始时设置它并忘记它:) 谢谢反正