angular2主题基于路线

时间:2018-03-20 12:37:34

标签: angular

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

我想在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?

提前致谢。

1 个答案:

答案 0 :(得分:0)

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

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

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

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

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