我对 Rxjs 和 Angular 4 还很陌生，无法理解如何做到这一点。
模板：
<div class="btn-group cp">
<input [colorPicker]="bgColor"
(colorPickerChange)="colorChanged()"
[style.background]="bgColor">
</div>
colorChanged() 在 mousemove 上被 colorPickerChnage 调用。我想在我的组件中有这样的东西：
colorChanged$.subscribe(data => console.log(data))
（它会有一些去抖动和更多的订阅者，这就是为什么我想把它作为一个可观察的。）
我有一个带有插入阴影的容器div,我在这个容器里面也有子元素,我只想让这些孩子可以点击.
设置子项(我的项目中的图像,不确定是否重要)元素的z-index为-1对于显示阴影是必不可少的.但是这样做容器将覆盖子元素,因此单击将不起作用.
设置指针事件:无; 容器元素上也没有帮助(我也希望容器可以滚动).
$('.item').on('click', function() {
alert($(this).attr('id'));
}); .container {
position: absolute;
width: 250px;
height: 250px;
border-radius: 50%;
box-shadow: inset 0 0 10px black;
overflow-y: scroll;
overflow-x: hidden;
}
.item {
width: 250px;
height: 80px;
margin: 3px 0;
background-color: #cacaca;
position: relative;
text-align: center;
z-index: -1;
/*Shadow visible, JS doesn't work*/
/*z-index: 0;*/
/*Clickable, but shadow is covered */
}<div class="container">
<div class="item" id="item1">
<p>CLICK</p>
</div>
<div class="item" id="item2">
<p>CLICK</p>
</div>
<div class="item" id="item3">
<p>CLICK</p>
</div>
<div class="item" …