文档章节

了解Angular2---App的生命周期

boogoogle
 boogoogle
发布于 2015/12/02 21:02
字数 483
阅读 172
收藏 0

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
  }}

原文链接

© 著作权归作者所有

共有 人打赏支持
下一篇: (5)ionic2--导航
boogoogle
粉丝 10
博文 100
码字总数 26332
作品 0
昌平
前端工程师
私信 提问
Angular 中得 scope 作用域梳理

$scope 的使用贯穿整个 Angular App 应用,它与数据模型相关联,同时也是表达式执行的上下文.有了 $scope 就在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会立刻更新 $scope,同...

顽Shi
2014/09/21
0
2
ngular2 VS Angular4 深度对比:特性、性能

在Web应用开发领域,Angular被认为是最好的开源JavaScript框架之一。 Google的Angular团队已于3月23日发布了Angular4,而期待已久的Angular2版本则是之前版本的完全重构。 对于成熟的开发人员...

机器的心脏
06/02
0
0
AngularDart4.0 英雄之旅-教程-02启动应用

码云项目页:https://gitee.com/scooplolwiki/toh-0 此教程讲解Angular的文件架构,(查看源代码)查看应用程序。 创建应用 开始,创建名为angulartourof_heroes的项目,使用WebStorm或者命令...

scooplol
2017/10/19
0
11
5ThingsToKnowBeforeYouGetStartedWithAngulerJS

AngularJS is Entirely Client-Side AngularJS is written in JavaScript, and it functions entirely on the client side. This means two things for your app. First, you can run Angula......

perfectspr
2014/12/16
0
0
OSChina 技术专题之 AngularJS 更新版(201412)

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

OSC编辑部
2014/10/17
11.1K
26

没有更多内容

加载失败,请刷新页面

加载更多

Spring boot 各种常用注解总结(不断完善中)

@Configuration把一个类作为一个IoC容器,它的某个方法头上如果注册了@Bean,就会作为这个Spring容器中的Bean。 @Scope注解 作用域 @Lazy(true) 表示延迟初始化 @Service用于标注业务层组件、...

覃大光
2分钟前
0
1
《让家庭教育回归生活》读书笔记3000字范文

《让家庭教育回归生活》读书笔记3000字范文: 以前,只知道新东方是教英语的,也培训挖掘机司机,一直不知道他们还研究家庭教育。读了《让家庭教育回归生活》一书,才知道他们的家庭教育高峰...

原创小博客
14分钟前
0
0
spring学习笔记(二)spring 事件的使用

spring 中的事件 spring事件通过订阅发布 可以解耦操作 可以同步 可以异步 步骤 编写事件 通过继承org.springframework.context.ApplicationEvent 来编写事件 public ApplicationEvent(Obj...

NotFound403
昨天
13
0
特斯拉车主成功破解了自己Model 3汽车

据汽车博客Electrek消息,一位特斯拉车主成功破解了自己Model 3汽车,还在此基础上运行了Ubuntu。 这位叫trsohmers的网友表示,“功劳大多要归到Ingineerix的头上,他花了数月才找到初始的那...

linuxCool
昨天
4
0
Gitbook : random errors when using gitbook plugin on running "gitbook serve"

在执行gitbook serve时,会有不定的失败错误 参考问题 :#1309 解决方案: 更新gitbook版本,这个问题似乎是3版本的问题 , 官方也不打算在这个版本解决了。 更新 到最新版本后, 不再出现问...

ol_O_O_lo
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部