当css遇到rxjs-angular

当css遇到rxjs-angular

• 项目地址github

这是一个神奇的想法，用流控制样式。

安装

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;
}