ts-observer v0.2.6

响应式状态

基于rxjs + proxy代理的方式实现响应式观察，监听对象属性的变化(可以监听嵌套对象属性变化，新增、删除属性行为，及数组的变化)，自动实例化BehaivorSubject，并自动next更新。外部只需订阅响应式对象即可获取变更通知

import {Injectable} from '@angular/core';

import {Observable} from 'rxjs';
import {Observer} from 'ts-observer';

@Injectable({
  providedIn: 'root'
})
export class RxjsProxyService {

  user$: Observable<any>;

   @Observer('user$') user = {
      name: 'alvin',
      score: 0,
      friend: {
        name: 'maksim',
        score: 0
      },
      friendList: [
        {
          name: 'alvin1',
          score: 0
        },
        {
          name: 'alvin2',
          score: 0
        },
        {
          name: 'alvin3',
          score: 0
        }
      ]
    };   

  arr$: Observable<any>;

  @Observer('arr$') arr = [];

  addScore() {
    this.user.score++;
  }

  updateArr() {
    this.arr.push(1);
  }


}

import {ChangeDetectionStrategy, Component} from '@angular/core';
import {Observable} from 'rxjs';
import {RxjsProxyService} from './rxjs-proxy.service';

@Component({
  selector: 'app-rxjs-proxy',
  template: `
    <nz-card>
      {{(user$|async)?.name}}
      {{(user$|async)?.score}}
    </nz-card>
    <nz-card>
      <nz-tag *ngFor="let item of arr$|async">{{item}}</nz-tag>
    </nz-card>
    <br>
    <button nz-button (click)="rxjsProxyService.addScore()">加分</button>
    <button nz-button (click)="rxjsProxyService.updateArr()">改变数组</button>
  `,
  styleUrls: ['./rxjs-proxy.component.less'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class RxjsProxyComponent {

  user$: Observable<any>;
  arr$: Observable<any>;

  constructor(public rxjsProxyService: RxjsProxyService) {
    this.user$ = this.rxjsProxyService.user$;
    this.arr$ = this.rxjsProxyService.arr$;
  }
}

也支持简单回调的方式

• 使用方法，给需要观察的对象写上注解即可，注解中的参数为回调方法，大致如下：

export class DemoComponent implements OnInit{
    // 传入回调函数名称，装饰器会监听对象属性的变化，并自动执行回调 （场景：参数变化 自动加载数据）
    @OnDeepChange('load')
    params: any = {
      page: 1,
      size: 10,
      other:{
        a:{
          b:3
        }
      }
    };
  
    load() {
      // ... 自动加载数据
      console.log('【查看现在的参数】', this.params);
    }
  
    changePage() {
      this.params.page++;
    }
  
    ngOnInit() {
      this.changePage(); // page = 2
      this.changePage(); // page = 3
      this.changePage(); // page = 4
      this.changePage(); // page = 5   
      
      this.params.other.a.b=4; // b = 4 
    }
}