Question

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

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

我该如何解决这个问题？

应用组件：

<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'
  }
];

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

Answer 1

使用sass并为公共和管理员组件创建类标志像这样

theme / _public.scss

.public{ 
  label { 
    color:red;
  }
}

主题/_admin.scss

.admin { 
  label {
    color:green;
  }
}

这是主要样式。scc

@import "theme/_public.scss";
@import "theme/_admin.scss";

这对于提高应用程序性能要好得多，您将拥有一个具有公共和管理页面样式的样式文件

equivalent of Console.ReadLine() in c++

Answer 2

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

document.styleSheets[2].disabled = false;

或

document.styleSheets[2].disabled = true;

就是这样。

Angular 5中单独模块的单独样式

2 个答案: