4-1 什么是注解 做一个注解 再写一个注解加深印象 结束


在函数里面return了一个函数。函数本身的返回值就是函数。
4-1 什么是注解
做一个注解
再写一个注解加深印象
结束
装饰器并不是angular独有的 它是typeScript的特性。
4-1 什么是注解
做一个注解
再写一个注解加深印象
结束

做一个表情的注解。
4-1 什么是注解
做一个注解
再写一个注解加深印象
结束
让传入的字符串两边个加 一个表情符号。
4-1 什么是注解
做一个注解
再写一个注解加深印象
结束
在shared目录下新建目录decorators
4-1 什么是注解
做一个注解
再写一个注解加深印象
结束
新建index.ts
4-1 什么是注解
做一个注解
再写一个注解加深印象
结束
函数里面返回另外一个函数
4-1 什么是注解
做一个注解
再写一个注解加深印象
结束
这个函数实际上是一个匿名函数,匿名函数可以使用Es6的写法,箭头函数的形式,参数有两个一个target 一个是key
4-1 什么是注解
做一个注解
再写一个注解加深印象
结束
key是string类型。target实际上就是调用这个装饰器的类。
4-1 什么是注解
做一个注解
再写一个注解加深印象
结束
先获取目标对象的属性,然后return这个val
4-1 什么是注解
做一个注解
再写一个注解加深印象
结束
用setter,把传入的值两边 加上表情符号。
4-1 什么是注解
做一个注解
再写一个注解加深印象
结束
怎么附加在原来的对象之上呢?这个只是点是javascript上的。意思是把这个对象的key重新做一下定义。
4-1 什么是注解
做一个注解
再写一个注解加深印象
结束
把它的get和set用我们上面定义的getter和setter代替,然后并设置enumerable和configurable设置为true
4-1 什么是注解
做一个注解
再写一个注解加深印象
结束
在这里导入这个注解
4-1 什么是注解
做一个注解
再写一个注解加深印象
结束
页面上展示效果
4-1 什么是注解
做一个注解
再写一个注解加深印象
结束
4-1 什么是注解
做一个注解
再写一个注解加深印象
结束

我们在debug里面看一下,默认是没有配置,点击轮毂的按钮。
4-1 什么是注解
做一个注解
再写一个注解加深印象
结束
它会让你选择哪个debug的,这里选择Chrome
4-1 什么是注解
做一个注解
再写一个注解加深印象
结束
这里换成4200,因为我们前端的运行环境是4200
4-1 什么是注解
做一个注解
再写一个注解加深印象
结束
要求是先启动ng serve 启动前端。点击绿色按钮
4-1 什么是注解
做一个注解
再写一个注解加深印象
结束
这个时候会新启动一个网页
4-1 什么是注解
做一个注解
再写一个注解加深印象
结束
我们在前端的ts代码里设置断点
4-1 什么是注解
做一个注解
再写一个注解加深印象
结束
重新刷一下前端页面
4-1 什么是注解
做一个注解
再写一个注解加深印象
结束
断点就进来了
4-1 什么是注解
做一个注解
再写一个注解加深印象
结束
4-1 什么是注解
做一个注解
再写一个注解加深印象
结束
点击跳到下一步
4-1 什么是注解
做一个注解
再写一个注解加深印象
结束

再写一个注解加深印象

angular中的注解,不光可以应用于属性,还可以应用于函数
比如说在这里点击之前,我们想要它有一个确认的对话框。
4-1 什么是注解
做一个注解
再写一个注解加深印象
结束
这个注解有参数
4-1 什么是注解
做一个注解
再写一个注解加深印象
结束
参数叫做message
4-1 什么是注解
做一个注解
再写一个注解加深印象
结束
参数是string类型的
4-1 什么是注解
做一个注解
再写一个注解加深印象
结束
同样的在里面我们返回一个函数。
4-1 什么是注解
做一个注解
再写一个注解加深印象
结束
函数多一个入参,属性描述符,它是一个PropertyDescriptor
4-1 什么是注解
做一个注解
再写一个注解加深印象
结束
PropertyDescriptor也是javascripr中的概念。比如说在一个对象中
比如说下面这个类就是一个对象
4-1 什么是注解
做一个注解
再写一个注解加深印象
结束
对于每一个属性,它都有一个描述符。这个描述符里面会有这个属性的值,get和set
4-1 什么是注解
做一个注解
再写一个注解加深印象
结束
我们的装饰器,修饰的一个函数。我们要把这个函数得到。
4-1 什么是注解
做一个注解
再写一个注解加深印象
结束
先把原来的函数放到一个变量里面。然后我们要对它进行处理。
4-1 什么是注解
做一个注解
再写一个注解加深印象
结束
我们要弹出对话框,根据对话框的选择来决定是否执行这个函数。我们来定义这个函数,给他一个参数...args是any类型的。
4-1 什么是注解
做一个注解
再写一个注解加深印象
结束
我们首先要做的是弹出对话框的这个操作,弹出对话框里面要有信息,这里我们用的就是message,正好是我们装饰器接收的参数。
4-1 什么是注解
做一个注解
再写一个注解加深印象
结束
然后根据它的返回结果值来决定是否执行原有的函数。4-1 什么是注解
做一个注解
再写一个注解加深印象
结束
4-1 什么是注解
做一个注解
再写一个注解加深印象
结束
如果返回的结果为真,那么就执行原有的函数,否则就返回null
4-1 什么是注解
做一个注解
再写一个注解加深印象
结束
最后在把这个descriptor返回回去。这样我们的装饰器就完事了。
4-1 什么是注解
做一个注解
再写一个注解加深印象
结束
然后把这个装饰器导入进来
4-1 什么是注解
做一个注解
再写一个注解加深印象
结束
这个时候点击一下你好,就会弹出一个窗体
4-1 什么是注解
做一个注解
再写一个注解加深印象
结束
点击确定
4-1 什么是注解
做一个注解
再写一个注解加深印象
结束
注解其实就是函数。只不过它是一个返回函数的函数。注解本身可以带参数,也可以不带参数。

在写注解的过程中用到的一些概念,这些概念可以去下面的网站去看。
4-1 什么是注解
做一个注解
再写一个注解加深印象
结束
4-1 什么是注解
做一个注解
再写一个注解加深印象
结束

 

结束