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/ ...
随机推荐
- java: web应用中不经意的内存泄露
前面有一篇讲解如何在spring mvc web应用中一启动就执行某些逻辑,今天无意发现如果使用不当,很容易引起内存泄露,测试代码如下: 1.定义一个类App package com.cnblogs. ...
- .NET平台开源项目速览(18)C#平台JSON实体类生成器JSON C# Class Generator
去年,我在一篇文章用原始方法解析复杂字符串,json一定要用JsonMapper么?中介绍了简单的JSON解析的问题,那种方法在当时的环境是非常方便的,因为不需要生成实体类,结构很容易解析.但随着业务 ...
- 来吧,HTML5之基础标签(上)
什么是html5 HTML 5 是下一代的 HTML.HTML5 仍处于完善之中.然而,大部分现代浏览器已经具备了某些 HTML5 支持. 学习过程中标签的理解 <a>标签 定义超链接, ...
- VS项目中使用Nuget还原包后编译生产还一直报错?
Nuget官网下载Nuget项目包的命令地址:https://www.nuget.org/packages 今天就遇到一个比较奇葩的问题,折腾了很久终于搞定了: 问题是这样的:我的解决方案原本是好好的 ...
- jQuery遮罩层登录对话框
用户登录是许多网站必备的功能.有一种方式就是不管在网站的哪个页面,点击登录按钮就会弹出一个遮罩层,显示用户登录的对话框.这用方式比较灵活方便.而现在扫描二维码登录的方式也是很常见,例如QQ.微信.百度 ...
- 如何使用本地账户"完整"安装 SharePoint Server 2010+解决“New-SPConfigurationDatabase : 无法连接到 SharePoint_Config 的 SQL Server 的数据 库 master。此数据库可能不存在,或当前用户没有连接权限。”
注:目前看到的解决本地账户完整安装SharePoint Server 2010的解决方案如下,但是,有但是的哦: 当我们选择了"完整"模式安装SharePointServer201 ...
- BZOJ 1010: [HNOI2008]玩具装箱toy [DP 斜率优化]
1010: [HNOI2008]玩具装箱toy Time Limit: 1 Sec Memory Limit: 162 MBSubmit: 9812 Solved: 3978[Submit][St ...
- CentOS 6.3下 安装 Mono 3.2 和Jexus 5.4
最新更新参看: Centos 7.0 安装Mono 3.4 和 Jexus 5.6 2012年初写过一篇<32和64位的CentOS 6.0下 安装 Mono 2.10.8 和Jexus 5.0 ...
- 一步步学习javascript基础篇(8):细说事件
终于学到事件了,不知道为何听到“事件”就有一种莫名的兴奋.可能是之前的那些知识点过于枯燥无味吧,说起事件感觉顿时高大上了.今天我们就来好好分析下这个高大上的东西. 可以说,如果没有事件我们的页面就只能 ...
- ReactNative入门 —— 动画篇(下)
在上篇动画入门文章中我们了解了在 React Native 中简单的动画的实现方式,本篇将作为上篇的延续,介绍如何使用 Animated 实现一些比较复杂的动画. 动画组合 在 Animated 中提 ...