angular2主题基于路线

Question

我有两条路线/书籍和/画作

我想在index.html中包含基于路线的链接标记

对于/ books路线，我想包括

<link rel="stylesheet" href="/assets/css/reading-theme.css" />

对于/绘画路线，我想包括

<link rel="stylesheet" href="/assets/css/gallery-theme.css" />

两个主题文件都有css，风格html背景不同

读theme.css

html, body {
    background-color: #000;
    box-sizing: border-box;
}

廊-theme.css

html, body {
    background-color: #edb2b2;
    box-sizing: content-box;
}

如果我将这些文件包含在相应组件的styleUrls中，就像这样

styleUrls: ['../../assets/css/reading-theme.css', './books.component.css']

css没有应用于html。

如何根据路线使用不同的主题文件？有没有像Title服务这样的服务可以用来动态设置链接hrefs？

提前致谢。

Answer 1

如果您的风格基于路线，那么您应该只在组件上设置样式。

我看到你尝试过但失败了，因为那不是怎么做的。据我所知，只有一个html和一个body代码，它们不在您的组件中，而是在index.html文件中。

这就是你的风格应该是这样的：

* {
  background-color: #edb2b2;
  box-sizing: content-box;
}

由于Angular封装了视图，因此此样式仅应用于您所处的路径（除非您更改封装）。