angular2系列教程(五)Structural directives、再谈组件生命周期
今天,我们要讲的是structural directives和组件生命周期这两个知识点。structural directives顾名思义就是改变dom结构的指令。著名的内建结构指令有 ngIf, ngSwitch and ngFor。
例子
例子是我自己改写的,编写一个structural directives,然后通过这个指令实例化和注销组件,在此同时监视组件生命周期。
UnlessDirective
这个指令是官网示例中的指令。
app/unless.directive.ts
import {Directive, Input} from 'angular2/core'; import {TemplateRef, ViewContainerRef} from 'angular2/core'; @Directive({ selector: '[myUnless]' }) export class UnlessDirective { constructor( private _templateRef: TemplateRef, private _viewContainer: ViewContainerRef ) { } @Input() set myUnless(condition: boolean) { if (!condition) { this._viewContainer.createEmbeddedView(this._templateRef); } else { this._viewContainer.clear(); } } }
通过注入TemplateRef, ViewContainerRef这两个服务,来控制template的实例化和注销。TemplateRef可以让我们获取指令所在的元素的template,ViewContainerRef提供了多种视图容器的方法。
更详细的介绍:
用于测试的组件
接下来我们编写一个用于测试的组件。
app/lifecycle.ts
import {Component,Input} from 'angular2/core'; import {bootstrap} from 'angular2/platform/browser'; import {OnChanges, SimpleChange,OnInit,AfterContentInit,AfterContentChecked,AfterViewInit,AfterViewChecked,OnDestroy} from 'angular2/core'; @Component({ selector: "lifecycle", template: ` <div> <span>{{name}}</span> <button (click)="doSomething()">click and watch the lifecycle</button> </div> ` }) export class Lifecycle implements OnChanges, OnInit,AfterContentInit,AfterContentChecked,AfterViewInit, AfterViewChecked, OnDestroy{ @Input() name:string doSomething(){ console.log('***********doSomething**********'); setTimeout(()=>{ console.log('***********setTimeout**********'); this.name='susan' },1000) } ngOnInit(){console.log('onInit');} ngOnDestroy(){console.log('OnDestroy')} ngOnChanges(changes: {[propertyName: string]: SimpleChange}){console.log('ngOnChanges',changes)} ngAfterContentInit(){console.log('AfterContentInit')} ngAfterContentChecked(){console.log('AfterContentChecked')} ngAfterViewInit(){console.log('AfterViewInit')} ngAfterViewChecked(){console.log('AfterViewChecked')} }
这段代码我们做了这些事:
- 渲染一个span一个button
- 设置成员变量name,@input代表从parent输入
- 设置成员函数doSomething,打印一个信息,执行一个异步操作setTimeout
- 继承接口,设置所有的生命周期钩子,并打印信息
我们将使用这个组件,来监视组件生命周期。
使用指令控制组件
我们将我们的组件渲染出来,并用我们编写的结构指令“myunless”去实例化和注销这个组件
app/app.ts
import {Component} from 'angular2/core'; import {bootstrap} from 'angular2/platform/browser'; import {UnlessDirective}from './unless.directive'; import {Lifecycle} from './lifecycle' @Component({ selector: "app", directives:[UnlessDirective,Lifecycle], template: ` <button (click)="condition = !condition" [style.background] = "condition ? 'orangered': 'lightgreen'" > Set 'condition' to {{condition ? 'False': 'True'}} </button> <lifecycle *myUnless="condition" name="lewis"></lifecycle> ` }) export class App { constructor() {} } bootstrap(App, []) .catch(err => console.error(err));
这段代码我们干了这些事:
- 注入组件和指令directives:[UnlessDirective,Lifecycle]
- 渲染一个button控制成员变量condition的正负
- 渲染我们的组件lifecycle,并使用指令控制它的实例化和注销<lifecycle *myUnless="condition" name="lewis"></lifecycle>
- 最后启动这个app组件bootstrap(App, []) .catch(err => console.error(err));
开始测试
刷新页面:
- onInit是在组件第一次ngOnChanges时执行
- OnChanges在input和output绑定的值变化时候;我们可以看到打印了变化的值。可以替代ng1中的$watch;
- AfterContentInit、AfterViewInit分别代表在组件内容和视图初始化后执行。
- AfterContentChecked和AfterViewChecked是在组件内容和视图检查完后执行。
这里没有DoCheck,因为接口没有证实。
点击Set 'condition' toTrue按钮,页面上的组件被注销
console打印:
点击Set 'condition' to False按钮,页面上的组件重新被实例化:
console打印:
打印了一次Onchanges、onInit、AfterContentInit、AfterViewInit、AfterContentChecked和AfterViewChecked,说明组件实例化,只需要触发一轮初始化和变化检查。与刷新页面的五次对比,我们可以知道多余的“变化检查”,可能来源于angualr的启动。
点击click and watch the lifecycle按钮,一秒后页面上的name变为susan:
console打印
先打印一次AfterContentChecked和AfterViewChecked,一秒后又打印两次。OnChanges没有触发。
结论和收获
- TemplateRef, ViewContainerRef这两个服务可以帮助我们实现结构指令的编写
- 结构指令可以完全注销组件,节约性能消耗
- 组件实例化,只需要触发一轮初始化和“变化检查”
- angualr的启动会触发多次“变化检查”
- 我们可以继承OnChanges接口,来实现类似ng1中的$watch功能,获取变化前后的值,但是只能监视@input装饰的变量
- ng2使用zone,将window对象上常见的异步方法(setTimeout等),都打上了“猴子补丁”,使其可以直接更新视图,我们再也不用在异步中写ng1中的$apply了
- 我们可以使用setTimeout(()=>{},0),在浏览器的一轮“event loop”后来触发ng2的“变化检查”
- 我们触发类的成员函数(doSomething)时,也会导致ng2的“变化检查”
教程源代码及目录
如果您觉得本博客教程帮到了您,就赏颗星吧!
https://github.com/lewis617/angular2-tutorial
angular2系列教程(五)Structural directives、再谈组件生命周期的更多相关文章
- Fastify 系列教程三 (验证、序列化和生命周期)
Fastify 系列教程: Fastify 系列教程一 (路由和日志) Fastify 系列教程二 (中间件.钩子函数和装饰器) Fastify 系列教程三 (验证.序列化和生命周期) 验证 Fast ...
- angular2系列教程(十)两种启动方法、两个路由服务、引用类型和单例模式的妙用
今天我们要讲的是ng2的路由系统. 例子
- CRL快速开发框架系列教程五(使用缓存)
本系列目录 CRL快速开发框架系列教程一(Code First数据表不需再关心) CRL快速开发框架系列教程二(基于Lambda表达式查询) CRL快速开发框架系列教程三(更新数据) CRL快速开发框 ...
- C#微信公众号开发系列教程五(接收事件推送与消息排重)
微信公众号开发系列教程一(调试环境部署) 微信公众号开发系列教程一(调试环境部署续:vs远程调试) C#微信公众号开发系列教程二(新手接入指南) C#微信公众号开发系列教程三(消息体签名及加解密) C ...
- NGUI系列教程五(角色信息跟随)
在一些网络游戏中,我们常常可以看到角色的上方显示着角色的名称,等级,血量等信息.它们可以跟随角色移动,并且可以显示和隐藏.今天我们就来学习一下这些功能的实现方法.1. 新建unity工 程,导入NGU ...
- angular2系列教程(一)hello world
今天我们要讲的是angular2系列教程的第一篇,主要是学习angular2的运行,以及感受angular2的components以及模板语法. 例子 这个例子非常简单,是个双向数据绑定.我使用了官网 ...
- Android Studio系列教程五--Gradle命令详解与导入第三方包
Android Studio系列教程五--Gradle命令详解与导入第三方包 2015 年 01 月 05 日 DevTools 本文为个人原创,欢迎转载,但请务必在明显位置注明出处!http://s ...
- 黄聪:Microsoft Enterprise Library 5.0 系列教程(五) Data Access Application Block
原文:黄聪:Microsoft Enterprise Library 5.0 系列教程(五) Data Access Application Block 企业库数据库访问模块通过抽象工厂模式,允许用户 ...
- Android系列之Fragment(二)----Fragment的生命周期和返回栈
[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/ ...
随机推荐
- C语言 · 高精度加法
问题描述 输入两个整数a和b,输出这两个整数的和.a和b都不超过100位. 算法描述 由于a和b都比较大,所以不能直接使用语言中的标准数据类型来存储.对于这种问题,一般使用数组来处理. 定义一个数组A ...
- Restful资源文章
理解RESTful架构 RESTful API设计指南 RESTful架构详解 NodeJs的RESTful API
- ABP文档 - 嵌入的资源文件
文档目录 本节内容: 简介 创建嵌入的文件 暴露嵌入的文件 使用嵌入的文件 简介 一个web应用里,客户端包含javascript,css,xml等文件,这此文件被添加到一个web项目后,发布成独立的 ...
- Atitit 项目语言的选择 java c#.net php??
Atitit 项目语言的选择 java c#.net php?? 1.1. 编程语言与技术,应该使用开放式的目前流行的语言趋势1 1.2. 从个人职业生涯考虑,java优先1 1.3. 从项目实际来 ...
- Security Policy:行级安全(Row-Level Security)
行级安全RLS(Row-Level Security)是在数据行级别上控制用户的访问,控制用户只能访问数据库表的特定数据行.断言是逻辑表达式,在SQL Server 2016中,RLS是基于安全断言( ...
- Bootstrap 模态框(Modal)插件
页面效果: html+js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- Ngrok让你的本地Web应用暴露在公网上
1.Ngrok介绍 Ngrok是一个反向代理,通过在公共的端点和本地运行的Web服务器之间建立一个安全的通道.Ngrok可捕获和分析所有通道上的流量,便于后期分析和重放.简单来说,利用 Ngrok可以 ...
- PHP获取上个月最后一天的一个容易忽略的问题
正常来说,PHP是有一个很方便的函数可以获取上个月时间的 strtotime (PHP 4, PHP 5, PHP 7) strtotime - 将任何英文文本的日期时间描述解析为 Unix 时间戳 ...
- BPM配置故事之案例13-触发消息通知
老李:小明! 小明:--见你就没好事,又要我干嘛? 老李:额,小事小事,最近很多部门都觉得Boss的审批速度太慢了,能不能以后给审批人一个消息提醒? 小明:--有一种不太好的预感 老李:怎么,很困难么 ...
- UWP控件与DataBind
在uwp开发中必不可少的一个环节就是各种通用的控件的开发,所以在闲暇时间汇总了一下在uwp开发中控件的几种常用写法,以及属性的几种绑定方式,有可能不全面,请大家多多包涵 :) 1.先从win10新增的 ...