angular2 简述

前端之家收集整理的这篇文章主要介绍了angular2 简述前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

angular2 总体简述

1.图(1)

2.图(2)

3.图(3)

4.图(4)

5.图(5)

6.

可以看出angular2的组件有以下两大部分组成:分别是下面的
1.@Component部分(可以称之为装饰器),装饰器方法里有一些参数。他们就是angular2八大核心之一的元数据
装饰器是typeScript提供的一种语法特性,用来修饰一个类
2.下面的class类(可以称之为组件类),显然组件的业务逻辑都是在这个类里面去编写的。如果仅仅只是所以装饰器的作用就是赋予一个类更丰富的信息(元数据定义一个类,angular2也是不知道如何去解释这个类的。而如果在这个类上加上@Component装饰器,这个装饰器会在运行的时候把他的元数据通过某一种方式注入到这个类里面。这样angular2就能识别出来这个类是个组件类。)

如图(6)

如图(7)

1,在构造函数上可以做一些组件类的初始化工作。例如变量的初始赋值等
2.接下来会触发OnChanges钩子。这是OnChanges钩子的第一次触发。主要用来接收来自父组件
3.然后到了OnInit钩子。这个才是实际意义的组件初始化阶段。angular2不推荐在组件初始化阶段处理一些跟业务逻辑相关的工作。而更好的方式是放在init阶段去处理的传入数据。为接下来的组件初始化提供数据支持
4.接下来组件会处在稳定期。这个时候OnChanges钩子会再次触发。只要从输入属性上获得的数据发生了变化,OnChanges钩子就会触发一次
5.最后,在组件被销毁之前会触发OnDestory钩子。在这一阶段会做一些清理的工作。例如事件解绑还有取消事件订阅等。还有别的钩子......


如图(8)


数据绑定

  • 1,在构造函数上可以做一些组件类的初始化工作。例如变量的初始赋值等

  • 2.事件绑定,他的作用和属性绑定相反。吧模板里产生的数据通过函数调用的方式传入到组件内

  • 3.前两种都属于单向绑定。双向绑定就是数据的双向流动,数据也会实时的进行双向流动。

猜你在找的Angularjs相关文章