Javascript Angular 5-如何在某些路由上加载某些css样式(仅用于管理路由的引导css)

Javascript Angular 5-如何在某些路由上加载某些css样式(仅用于管理路由的引导css),javascript,angular,bootstrap-4,angular-router,Javascript,Angular,Bootstrap 4,Angular Router,我只需要在以“/admin”开头的路由上使用引导css,我已经懒散地加载了管理和公共模块。为管理组件创建下面的子路由 export const routes: Routes = [ { path: 'home', component: HomeComponent}, { path: 'admin', component: AdminComponent,children: [ { path: '/user', component: AdminUserCompone

我只需要在以“/admin”开头的路由上使用引导css,我已经懒散地加载了管理和公共模块。

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

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

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

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

这样,样式将到处加载,例如,当我转到“/home”时,样式将可用,我不希望出现这种行为。@ppl,如何加载css样式?这是为Bootstrap 4标记的,因此您可能需要考虑这一点。当然,在这个例子中,这没什么大不了的。我只想举个例子,不管怎样,我已经将它改为Bootstrap 4。这将起作用,但对于管理部分的每个组件,我都必须手动添加它,我考虑的更多的是在开始时设置它并忘记它:)无论如何,如果有动态生成的内容,然后,该特定组件的样式可能不起作用,因为样式也通过虚拟DOM应用。