[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 } ...
随机推荐
- shell 如何避免误删目录
1.变量为空导致误删文件 base_path=/usr/sbin tmp_file=`cmd_invalid` # rm -rf $base_path/$tmp_file 这种情况下如果 cmd 执行 ...
- P1062 数列 题解
(题目为啥要强调用十进制输出呢,明明就是故意提醒) 分析一下样例 k=3k=3时,数列为:1,3,4,9,10,12,13..1,3,4,9,10,12,13.. 转换成三进制就是:1,10,11,1 ...
- static char定义的用法
static char *p是全局静态变量,char *p是临时变量,static定义的你在其他地方可以调用,而且是通用的,也就是说你在一个地方改了它的值,其他地方也就跟着改了,而char *p只是一 ...
- Java EE javax.servlet.http中的HttpRequest抽象类
HttpRequest抽象类 public abstract class HttpServlet extends GenericServlet 实现的接口有:Serializable, Servlet ...
- [转载]python with语句的用法
https://www.cnblogs.com/DswCnblog/p/6126588.html 看这篇文章的时候看到了python的类名()用法,很好奇,上网查了下,原来这就相当于对类进行实例化了. ...
- Cesium中的样条插值
Cesium中的样条插值 在cesium里,提供了三种样条插值方法,LinearSpline,CatmullRomSpline,HermiteSpline.在具体的实例上,可以使用样条插值法利用已知的 ...
- rabbitmq 连接报错 An unexpected connection driver error occured
转自:https://blog.csdn.net/zht741322694/article/details/82801873 在服务器上安装了一个RabbitMq,并新创建了一个用户授予了管理员角色, ...
- Spring的核心jar包
Spring的主要jar包 四个核心jar包:beans.context.core.expression Spring AOP:Spring的面向切面编程,提供AOP(面向切面编程)的实现Spring ...
- web项目部署在centos 7验证码显示不出来解决方案
今天把项目部署在centos7上,发现验证码显示不出来,看了一下tomcat日志 Exception in thread "http-nio-8080-exec-3" java.l ...
- 阿里Java开发规约【摘录】
1.命名规约 [强制]类名使用UpperCamelCase风格,必须遵从驼峰形式,但以下情形例外:(领域模型的相关命名)DO / BO / DTO / VO等. 正例:MarcoPolo / User ...