了解Angular2---App的生命周期
2015-12-02 00:00
267 查看
摘要: 一个app的运行有多个阶段,我们可以在app开始.运行.和创建/终止组件的时候添加响应
bootstrap
Angular2中,一个App需要用它的根组件进行引导
你可以把应用程序的代码和配置文件放到这个组件中,并且整个应用程序的组件链将会在它的模板文件中被创建
初始化组件
当一个组件被创建的时候,它的构造器就会生效.我们就是在这个构造器里面初始化组件的状态.但是如果要用到子组件当中的属性或者数据的话,就需要先等待一段时间.(等父组件依赖的子组件被创建之后才能初始化父组件).
这种情况下,我们可以使用setTimeout来解决这个问题.但是在这里,我们推荐你用生命周期事件onInit:
组件的生命周期
就像onInit,我们可以根据组件的生命周期追踪几个事件
原文链接
bootstrap
Angular2中,一个App需要用它的根组件进行引导
import {Component, bootstrap} from 'angular2/angular2'; // Annotation section @Component({ selector: 'my-app', template: '<h1>Hello {{ name }}</h1>' }) // Component controllerclass MyApp { constructor() { this.name = 'Max'; } } bootstrap(MyApp)
你可以把应用程序的代码和配置文件放到这个组件中,并且整个应用程序的组件链将会在它的模板文件中被创建
初始化组件
当一个组件被创建的时候,它的构造器就会生效.我们就是在这个构造器里面初始化组件的状态.但是如果要用到子组件当中的属性或者数据的话,就需要先等待一段时间.(等父组件依赖的子组件被创建之后才能初始化父组件).
这种情况下,我们可以使用setTimeout来解决这个问题.但是在这里,我们推荐你用生命周期事件onInit:
import {Component, bootstrap, onInit} from 'angular2/angular2'; // Annotation section @Component({ selector: 'street-map', template: '<map-window></map-window><map-controls></map-controls>', lifecycle: [onInit] }) // Component controller class StreetMap { constructor() { this.name = 'Max'; setTimeout(() => { // Similar to onInit below, but not recommended. // Could be useful in a pinch, though. }); } setMapWindow(mapWindow) { this.mapWindow = mapWindow; } setMapControls(mapControls) { this.mapControls = mapControls; } onInit() { // Properties are resolved and things like // this.mapWindow and this.mapControls // had a chance to resolve from the // two child components <map-window> and <map-controls> }}
组件的生命周期
就像onInit,我们可以根据组件的生命周期追踪几个事件
import {..., onInit, onDestroy, onChange, onCheck, onAllChangesDone} from 'angular2/angular2'; // Annotation section @Component({ selector: 'street-map', template: '<map-window></map-window><map-controls></map-controls>', lifecycle: [onInit, onDestroy, onChange, onCheck, onAllChangesDone] }) // Component controller class StreetMap { onInit() { // Properties are resolved and things like // this.mapWindow and this.mapControls // had a chance to resolve from the // two child components <map-window> and <map-controls> } onDestroy() { // Speak now or forever hold your peace } onCheck() { // Called right after our bindings have been checked } onChange(changes) { // Called right after our bindings have been checked but only // if one of our bindings has changed. // // changes is an object of the format: // { // 'prop': PropertyUpdate // } } onAllChangesDone() { // Called right after all of our bindings have been checked }}
原文链接
相关文章推荐
- 用版本控制系统来管理android studio项目时 配置忽略文件
- android-通过StatFs获取文件系统的空间信息
- 如何xcode6中创建pch文件
- Android Intent.FLAG_NEW_TASK详解,包括其他的标记的一些解释
- (写笔记习惯)关于从eclipse导入android studio 中,代码乱码的情况
- 将Android下的可执行文件以静态库的形式进行编译
- Feature extraction, foundation and application笔记
- type="application/javascript"
- 安卓仿IOS开关设计
- Android-Property Animation(属性动画)
- [iOS 开发问题解决]kCFStreamNetworkServiceTypeVoIP' is deprecated
- AndroidManifest.xml
- HappyNumber
- 使用第三方表单检验saripaar的时候,Android SDK版本不同,要注意啦,提示会有点小问题
- application.xml中配置HibernateTemplate模板
- android Media Playerback(2)
- 使用safari对webview进行调试
- 蓝懿 iOS 技术交流和心得分享 12.1
- Android动画效果生动有趣的通知NiftyNotification(Android Toast替代品)
- Cloneable接口和Object的clone()方法