模块范围的 css 文件

Question

Angular 9 中的 TLDR，是否可以延迟加载 CSS 样式(不是特定于组件的(？

---

我的模块结构：

AppModule
|--AppFormsModule
|--AppSharedModule
AdminModule
|--AppFormsModule
|--AppSharedModule

管理模块通过我的主应用程序模块中的路由延迟加载：

{
path: appPaths.admin.path,
canLoad: [ChapterAdminGuardService],
loadChildren: () => import('../modules/admin/admin.module').then(m => m.AdminModule)
}

我有一些特定于管理模块中几个组件的 css。它目前与我的主模块使用的 css 一起捆绑到全局 css 文件中。

是否可以从其他地方延迟加载此 css？具有明显的好处是，客户端在需要之前不会下载额外的资源。

理想情况下，我将能够指定应为特定模块加载特定的样式包。

我也对不同的方法持开放态度。例如 - 是否可以指定模块应使用不同版本的索引.html？

Answer 1

您可以使用AdminModule的根组件，我们称之为AppComponent，并将::ng-deep(已弃用(选择器与:host结合使用。即使此选择器已弃用，在有合适的替换选项之前，他们也不会将其删除：

app.component.scss：

:host ::ng-deep {
// This will make any paragraph element which is a child of the app-component element red 
p {
color: #F00;
}
}

通过将其添加为特定于组件的样式表，这将在加载管理模块时延迟加载。

---

如果你想使用 ViewEncapsulation.None，你可以做这样的事情：

@Component({
selector: 'app-admin-module',
styleUrls: [ './admin.component.scss' ],
encapsulation: ViewEncapsulation.None
})
export class AdminComponent {}

admin.component.scss：

app-admin-module {
// declare all your module styles here
p {
color: #F00;
}
}