Отдельные стили для отдельного модуля в Angular 5
Мой проект состоит из двух основных частей. Один для общедоступных веб-страниц, а другой для панели управления администратора. У каждого из них есть отдельные файлы CSS и javascript для своего шаблона.
Если я определяю все файлы CSS и js в index.html, все файлы загружаются при первом совпадении веб-страницы, а также может иметь конфликт между классами CSS.
Как я могу справиться с этой проблемой?
app.component:
<router-outlet></router-outlet>
app-routing.module:
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'
}
];
у каждого модуля есть свои подмодули. Могу я разделить их стили?
вы имеете в виду, что добавляете css файлы в список styleUrls?
Да, дайте каждому компоненту свой собственный файл CSS и загрузите его в список styleUrls, так вы не получите конфликтов.
как насчет файлов js. например, если я использую шаблон начальной загрузки, у него есть файлы js
Ответы 2
Используйте sass и создайте флаг класса для общественности и администратора составные части как это
тема / _public.scss
.public{
label {
color:red;
}
}
тема / _admin.scss
.admin {
label {
color:green;
}
}
и это в основном style.scc
@import "theme/_public.scss";
@import "theme/_admin.scss";
это намного лучше для производительности приложения, у вас будет один файл стиля со стилем общедоступной и административной страниц
Мухаммад Альбармави, с вашим методом, оба стиля загружены в первую встречу
Да, весь стиль будет связан с одним файлом, но конфликт не будет, потому что флаг класса
просто посмотрите на каждый флаг, дайте разный цвет для элемента метки
Я нашел решение. Мы можем отключить или включить файлы css в компоненте.
document.styleSheets[2].disabled = false;
или же
document.styleSheets[2].disabled = true;
это оно.
Это очень полезно, но есть одна проблема, которую мы должны найти в массивах css, которые нам нужно отключить.
Почему бы не определить CSS для каждого компонента?