Angular 5中单独模块的单独样式 [英] separate styles for separate module in Angular 5

问题描述

我的项目有两个主要部分.一个用于公共网页，另一个用于管理员控制面板.他们每个人都有各自的ccs和javascript文件作为模板.

My project has two main part. one for public web pages and other for admin control panel. each of them have separate ccs and javascript files for their template.

如果我在index.html中定义了所有css和js文件，则所有文件都将在网页的初次见面时加载，并且在css类之间也可能会发生冲突.

If I define all css and js files in index.html, all files load in first meet of web page, and also maybe have conflict between css classes.

我该如何解决这个问题?

How can I handle this problem?

应用组件:

<router-outlet></router-outlet>

应用程序路由模块:

import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";

import { FirstComponent } from './first/first.component';


const appRoutes: Routes = [
  { path: 'first', component: FirstComponent },
  {
    path: 'controlpanel',
    loadChildren: 'app/control-panel/control-panel.module#ControlPanelModule'
  },
  {
    path: 'publicpanel',
    loadChildren: 'app/public-panel/public-panel.module#PublicPanelModule'
  }
];

每个模块都有其子模块.我可以分开他们的样式吗?

each module have their sub modules. Can I separate their styles.

推荐答案

我找到了解决方案.我们可以在组件中禁用或启用CSS文件.

I found the solution. We can disable or enable css files in component.

document.styleSheets[2].disabled = false;

或

document.styleSheets[2].disabled = true;

就是这样.

这篇关于Angular 5中单独模块的单独样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！