ngx-watcher 正在参加 2021 年度 OSC 中国开源项目评选,请投票支持!
ngx-watcher 在 2021 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
2021 年度 OSC 中国开源项目评选 正在火热进行中,快来投票支持你喜欢的开源项目!
2021 年度 OSC 中国开源项目评选 >>> 中场回顾
ngx-watcher 获得 2021 年度 OSC 中国开源项目评选「最佳人气项目」 !
授权协议 Apache 2.0
开发语言 TypeScript
操作系统 跨平台
软件类型 开源软件
所属分类 管理和监控
开源组织
地区 国产
适用人群 未知
收录时间 2018-08-13

软件简介

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

关于本组件项目

本项目使用Angular CLI version 6.0.7生成

运行项目

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

编译组件

npm run build:lib

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

运行效果

运行效果

LICENSE

Apache-2.0

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论

点击引领话题📣
暂无内容
发表了博客
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
发表了问答
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
暂无内容
0 评论
1 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部