Question

我试图在Angular组件中放置一个滑块，但我无法使样式正常工作。无论我尝试过什么CSS选择器，它都没有找到与滑块有关的内容，但它确实成功地设置了其他元素的样式，因此我知道正在使用CSS文件。 css如下：

/*This selector works*/
h1 {
  background: red;
}

#slider19 {
  margin: 10px;
}

#slider19 .slider-track {
    background: #2eb82e;
}

#slider19 .slider-selection {
    background: #2eb82e;
}

#slider19 .slider-handle {
    background: #040404;
}

我已经在一个vanilla javascript应用程序中测试了完全相同的CSS，它按预期工作，如果我将这个CSS文件添加为index.html中的链接，它就可以工作。

滑块是bootstrap-slider和Plunker，可以找到问题here

Answer 1

首先，您使用角度2的测试版，而不是使用最新的稳定版本。

其次，由于组件封装，CSS会被角度重写为

#slider19[_ngcontent-bla-1] { margin: 10px; }.

如果HTML是由Angular生成的，那将会正常工作，但事实并非如此。您正在使用jQuery来生成它。

首先使用最新的稳定版Angular，然后尝试查找或编写基于角度的滑块，然后，如果确实需要，禁用该组件上的视图封装。这是an example。

CSS选择器在第3方库的Angular 2应用程序中无法正常工作

1 个答案: