当css遇到rxjs-angular
这是一个神奇的想法，用流控制样式。
安装
yarn add iwe7-icss
使用
import { IcssService, IcssInterface } from 'iwe7-css';
// cube颜色控制器
cubeColorCtrl$: Subject<{ color: string; bg: string }> = new Subject();
@ViewChild('cube') cube: ElementRef;
constructor(public icss: IcssService, public ele: ElementRef){}
ngOnInit(){
this.icss.init(
{
cube: this.cubeColorCtrl$
},
this.cube
);
setInterval(() => {
this.cubeColorCtrl$.next({
color: '#fff',
bg: this.randomHexColor()
});
},100);
}
randomHexColor(): string {
return `#${(
'00000' + ((Math.random() * 0x1000000) << 0).toString(16)
).substr(-6)}`;
}
<div class="cube"></div>
.cube{
background: var(--cube-bg);
color: var(--cube-color);
width: 100px;
height: 100px;
}
