ngx-watcher 基于 Angular6 的数据变化监听服务开源项目

我要开发同款
匿名用户2018年08月13日
48阅读
开发技术TypeScript
所属分类管理和监控
授权协议Apache 2.0

作品详情

ngx-watcher

基于angular6实现数据变化监听的service

安装npm install ngx-watcher --save配置

对于angular6项目不需要配置,Ok!

对于angular4,angular5配置app.module.ts文件

@NgModule({  ...  providers: [NgxWatcherService],  ...})export class AppModule { }使用 import {KvWatcher, IterWatcher, NgxWatcherService} from 'ngx-watcher'; @Component({...})  export class TestComponent implements DoCheck {    private kvWatcher: KvWatcher<any>;   private iterWatcher: IterWatcher<any>;    value = {}; // keyValue类型   array = []; // 可迭代类型    constructor(private service: NgxWatcherService) {     this.kvWatcher = service.of(this.value);     this.iterWatcher = service.ofIter(this.array);   }    ngDoCheck(): void {     this.kvWatcher.watch(       this.value,       v => console.log(`change after value:`, v),       (t, v) => console.log(`changed value: WatchChangeType=${t} ${v.key} ${v.previousValue} ${v.currentValue}`)     );      this.iterWatcher.watch(       this.array,       v => console.log(`change after value:`, v),       (t, v) => console.log(`changed value: WatchChangeType=${t} ${v.currentIndex} ${v.item} ${v.previousIndex} ${v.trackById}`)     );   } }关于本组件项目

本项目使用AngularCLI version6.0.7生成

运行项目

使用 ngserve启动开发服务.然后打开浏览器输入地址https://localhost:4200/ 即可

编译组件npm run build:lib

生成编译后的文件在dist/ngx-watcher目录

运行效果

LICENSE

Apache-2.0

声明:本文仅代表作者观点,不代表本站立场。如果侵犯到您的合法权益,请联系我们删除侵权资源!如果遇到资源链接失效,请您通过评论或工单的方式通知管理员。未经允许,不得转载,本站所有资源文章禁止商业使用运营!
下载安装【程序员客栈】APP
实时对接需求、及时收发消息、丰富的开放项目需求、随时随地查看项目状态

评论