了解Angular2---App的生命周期
了解Angular2---App的生命周期
boogoogle 发表于2年前
了解Angular2---App的生命周期
  • 发表于 2年前
  • 阅读 166
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

摘要: 一个app的运行有多个阶段,我们可以在app开始.运行.和创建/终止组件的时候添加响应

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

原文链接

共有 人打赏支持
粉丝 11
博文 87
码字总数 25968
×
boogoogle
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: