angular2 简述

码途寻星说
• 阅读 1531

angular2 总体简述

1.图(1)
angular2 简述

2.图(2)
angular2 简述

3.图(3)
angular2 简述

4.图(4)
angular2 简述

5.图(5)
angular2 简述

6.

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

如图(6)
angular2 简述

如图(7)
angular2 简述

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


如图(8)
angular2 简述


数据绑定

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

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

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

点赞
收藏
评论区
推荐文章
Wesley13 Wesley13
3年前
java b2b2c商城
一、需求分析1.买家可以对商品提交购买问题咨询,买家提交的商品购买咨询不单单商家可以进行回复,也应该可以将问题推送给购买过此商品的买家来进行回复。2.买家提出的咨询和对其他买家咨询的回复,都应该推送消息给相应的会员用户,做到及时提醒。二、流程图!在这里插入图片描述(https://img
Stella981 Stella981
3年前
Element upload组件上传图片与回显图片
场景:新增商品时需要添加商品主图,新增成功之后可编辑上传图片:<elformitemlabel"专区logo:"style"height:160px"<divclass"img"<eluploadaction
Wesley13 Wesley13
3年前
Canal+Otter
数据库同步中间件CanalOtter前日篇(2)MySQLInnoDB架构体系!这里写图片描述(http://static.oschina.net/uploads/img/201604/24113828_GCwY.jpg)MySQL体系前端
Stella981 Stella981
3年前
Canvas
Canvas04柱状图!输入图片说明(https://static.oschina.net/uploads/img/201707/04223024_wxwr.png"在这里输入图片标题")代码如下:<!DOCTYPEhtml<htmllang"zhCN"<head<metacharset"UTF8"<met
Wesley13 Wesley13
3年前
DOM解析XML文件3
1.新建名为domxml的项目!这里写图片描述(http://static.oschina.net/uploads/img/201507/11181054_RvEx.jpg)2.新建user\_item.xml的自定义布局文件<?xmlversion"1.0"encoding"UTF8"?<LinearLay
Wesley13 Wesley13
3年前
MySQL中myisam和innodb的主键索引有什么区别?
MyISAM引擎使用BTree作为索引结构,叶节点的data域存放的是数据记录的地址。下图是MyISAM索引的原理图:!这里写图片描述(https://static.oschina.net/uploads/img/201704/13160646_jwHA.jpg)这里设表一共有三列,假设我们以Col1为主键,则上图是一个MyISAM表的主索
Stella981 Stella981
3年前
QT使用label显示图片或者gif并自动适应label尺寸
显示图片1.在ui界面拖动label控件至界面。2.将想要显示的图片加入qt资源库。3.添加图片至label(利用setPixmap函数)。4.自使用label尺寸(利用setScaledContents函数)。未自适应label大小的效果:!在这里插入图片描述(https://oscimg.oschina.
Wesley13 Wesley13
3年前
Android侧滑菜单(DrawerLayout)的学习
侧滑菜单的简单使用;DrawerLayoutandroid提供的侧滑菜单,能够实现目录推出,就是大家常见的效果,效果图如下;!这里写图片描述(https://static.oschina.net/uploads/img/201706/29113317_a1lf.jpg)DrawerLayout的使用非常简单;只要你提供布局就好;一个左
Stella981 Stella981
3年前
Postman自动登录,请求带token
!这里写图片描述(http://img.blog.csdn.net/20180323182705200?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveGlhb2J1ZGluZzAwNw/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA/dissolve/70/gra
Stella981 Stella981
3年前
Android ImageView 的scaletype属性详细介绍
android:scaleType是控制图片如何resized/moved来匹对ImageView的size,我们可以这样啦使用1.<ImageViewandroid:id"@id/img\_weibo\_img"2.android:layout\_width"fill\_parent"3.and
Wesley13 Wesley13
3年前
HTML图片标签
<body<!使用img标签来向网页中引入外部的图片,img标签也是一个自结束标签属性:src:设置一个外部图片的路径alt:可以用来设置图片不能显示时,就会显示图