[TypeScript] @OnChange for ngOnChanges
Take away from NGCONF talk.
It is a good show case to how to use decorator.
export interface SimpleChange<T> {
firstChange: boolean;
previousValue: T;
currentValue: T;
isFirstChange: () => boolean;
} function OnChange<T = any>(
callback: (value: T, simpleChange?: SimpleChange<T>) => void
) {
console.log("callback", callback); const cachedValueKey = Symbol();
const isFirstChangeKey = Symbol(); return (target, key) => { Object.defineProperty(target, key, {
set: function(value) {
if (this[isFirstChangeKey] === undefined) {
this[isFirstChangeKey] = true;
} else {
this[isFirstChangeKey] = false;
}
// No operation if new value is same as old value
if (!this[isFirstChangeKey] && this[cachedValueKey] === value) {
return;
} console.log("set value", value); const oldValue = this[cachedValueKey];
this[cachedValueKey] = value;
const simpleChange: SimpleChange<T> = {
firstChange: this[isFirstChangeKey],
previousValue: oldValue,
currentValue: this[cachedValueKey],
isFirstChange: () => this[isFirstChangeKey]
};
callback.call(this, this[cachedValueKey], simpleChange);
},
get: function() {
return this[cachedValueKey];
}
});
};
} class Person {
@OnChange<string>(function(newVal, sc) {
this.trigger(newVal, sc)
})
private name: string = "wan"; trigger (newVal, simpleChange) {
console.log('newVal', newVal);
console.log('simpleChange', simpleChange);
}
} const p = new Person();
p.name = "aa"; // first time, trigger changes
p.name = "aa"; // second time, no trigger
p.name = "bb"; // Trogger changes
One take away is that we can use 'symbol' to uqine key.
const cachedValueKey = Symbol(); this[cachedValueKey]
[TypeScript] @OnChange for ngOnChanges的更多相关文章
- 3.认识Angular2组件之1
简述:组件(component)是构成Angular应用的基础和核心.可以这样说,组件用来包装特定的功能,应用程序的有序运行依赖于组件之间的协同工作. 1. 组件化标准:W3C为了统一组件化的标准方式 ...
- 转职成为TypeScript程序员的参考手册
写在前面 作者并没有任何可以作为背书的履历来证明自己写作这份手册的分量. 其内容大都来自于TypeScript官方资料或者搜索引擎获得,期间掺杂少量作者的私见,并会标明. 大部分内容来自于http:/ ...
- Nodejs生态圈的TypeScript+React
基于Nodejs生态圈的TypeScript+React开发入门教程 基于Nodejs生态圈的TypeScript+React开发入门教程 概述 本教程旨在为基于Nodejs npm生态圈的前端程 ...
- 基于Nodejs生态圈的TypeScript+React开发入门教程
基于Nodejs生态圈的TypeScript+React开发入门教程 概述 本教程旨在为基于Nodejs npm生态圈的前端程序开发提供入门讲解. Nodejs是什么 Nodejs是一个高性能Ja ...
- typescript 入门
为什么要使用typescript? 出现拼写错误,可以立即指出错误. 出现模块引入错误,立即指出错误. 出现函数.变量类型错误,立即指出错误. 在react组件中制定好了基本的props和state之 ...
- 三千字讲清TypeScript与React的实战技巧
很多时候虽然我们了解了TypeScript相关的基础知识,但是这不足以保证我们在实际项目中可以灵活运用,比如现在绝大部分前端开发者的项目都是依赖于框架的,因此我们需要来讲一下React与TypeScr ...
- TypeScript && React
环境搭建 我们当然可以先用脚手架搭建React项目,然后手动配置成支持TypeScript的环境,虽然比较麻烦,但可以让你更清楚整个过程.这里比较麻烦,就不演示了,直接用命令配置好. npx crea ...
- 在React旧项目中安装并使用TypeScript的实践
前言 本篇文章默认您大概了解什么是TypeScript,主要讲解如何在React旧项目中安装并使用TypeScript. 写这个的目的主要是网上关于TypeScript这块的讲解虽然很多,但都是一些语 ...
- vue typescript curd
用typescript 完成了一个页面 import { Component, Prop } from 'vue-property-decorator'; import Vue, { VNode } ...
随机推荐
- 怎样解决SQL Server内存不断增加问题
原文:怎样解决SQL Server内存不断增加问题 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn. ...
- 剑指offer4:重建二叉树(后序遍历)
1. 题目描述 输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树.假设输入的前序遍历和中序遍历的结果中都不含重复的数字.例如输入前序遍历序列{1,2,4,7,3,5,6,8}和中序遍历序列{4 ...
- Swoft2.x 小白学习笔记 (一) ---控制器
Swoft通过官方文档进行学习,这里不做介绍,直接上手. 涉及到Swoft方面:(配置.注意的坑) 1.控制器(路由.验证器.中间件) 2.mysql (Model使用).Redis配置及通用池 3 ...
- python使用xlutils库save()之后,文件损坏
import xlrd from xlutils.copy import copyworkbook=xlrd.open_workbook('test.xlsx')##打开excel为 .xlsx格式w ...
- PB赋值粘贴
复制:string ls_templs_temp = trim(sle_1.text)Clipboard(ls_temp) 粘贴:string ls_templs_temp = Clipboard() ...
- X86逆向11:F12暂停法的妙用
本节课将介绍F12暂停法的使用技巧,F12暂停法的原理其实很简单,当我们点击OD中的暂停按钮时,OD会将当前的堆栈状态保存起来,并暂停当前窗体的线程执行,直到我们点击运行按钮OD才会唤醒全部线程并继续 ...
- Spectral Norm Regularization for Improving the Generalizability of Deep Learning论文笔记
Spectral Norm Regularization for Improving the Generalizability of Deep Learning论文笔记 2018年12月03日 00: ...
- nginx代理 tomcat获得真实用户IP
nginx代理 tomcat获得真实用户IP 2017年04月08日 21:34:17 cf 阅读数 1825更多 分类专栏: nginx html/js/ajax 版权声明:本文为博主原创文章, ...
- 12 Django之Cookie和Session
一.什么是Cookie Cookie的由来 大家都知道HTTP协议是无状态的. 无状态的意思是每次请求都是独立的,它的执行情况和结果与前面的请求和之后的请求都无直接关系,它不会受前面的请求响应情况直接 ...
- ftp卡死问题
最近用org.apache.commons.net.ftp.FTPClient 写ftp的上传下载的定时任务 发现有时候线程会卡住,也不报错就一直不工作了,后来发现需要使用ftp的被动模式才行,实现 ...