angular - 部分角载荷 css

Question

我想知道是否有任何方法可以加载或限制索引 HTML 中的特定 css。

• 问题场景：

我使用 angular 4 将组件分隔为管理员和用户组件。两个组件都使用自己的 CSS。但问题是当我在 index.html 中包含 ' admin.css' 和 ' user.css' 时，它们都被合并并给了我一些丑陋的 UI。我只想user.css在用户指向用户的 URL 时显示包含“”，如果用户指向管理 URL，则对于管理场景也是如此，它应该加载“ admin.css”给我一个建议或解决方案来实现这一点。

提前致谢

标签： angularangular2-routingangular2-directivesangular4-router

Answer 1

首先 - 使用 Angular 4 -.css为每个组件包含文件的最佳实践。

我是说：

您有一个组件user.ts，因此您应该将用户的样式包含到该组件中，而不是 index.html

例子：

user.ts 代码：

@Component
....
styles: ['h1 { font-weight: normal; }']

或者

@Component
....
styleUrls: ['./user.css']

这将隔离你的风格。正如它在 Angular 文档中所说：

默认情况下，在 Angular 中，当您将 CSS 直接附加到组件时，我们将该 CSS 专门用于该组件。此范围将其与您的应用程序的其余部分隔离开来。这种附加功能意味着有两种方法可以将 CSS 与 Angular 一起使用。