Angular2 - Starter - Component and Component Lifecircle Hooks

我们通过一个NgModule来启动一个ng app，NgModule通过bootstrap配置来指定应用的入口组件。

@NgModule({
  bootstrap: [ AppComponent ],
  ....
}

 

在 declarations 可以配置sub_component

declarations: [
    FriendsComponent,
    ChatsComponent
]

如下构造一个TestComponent：

import {
  Component, OnInit, Input, OnChanges, SimpleChanges, AfterContentInit, AfterContentChecked, AfterViewChecked,
  AfterViewInit,DoCheck,OnDestroy, Output, EventEmitter, HostBinding, HostListener
} from '@angular/core';
import {AppComponent} from '../app.component';

@Component({
  /*
   定义css选择器，
   使用：
   <app-test [app]="config"></app-test>
   [app]="config" 表示父组件向TestComponent输入的信息
   */
  selector: 'app-test',
  /*
   组件的模板文件，如果模板文件代码不多，可以使用:
   template:'<span></span>'
   */

  templateUrl: './test.component.html',
  /*
   组件的样式，同样可以类似使用：
   styles:[
   {
   color:'red'
   }
   ]
   */
  styleUrls: ['./test.component.css']
})

export class TestComponent implements OnInit,OnChanges,AfterContentInit,AfterContentChecked,AfterViewChecked,AfterViewInit,DoCheck,OnDestroy {


  @Input()
  app:Object;
  @Input('config') set updateParent(app:Object){
    this.parent = app;
  }
  public parent = {};
  public title = 'hello';
  private name = 'test ng component';
  init(){
    //this.title = 'hello ng2.'
    console.log('inited..');
    this.name = this.name + 'in init.';
  }
  alertName(){
    alert(this.name);
  }
  constructor() {
    //构造函数一般用于接收组件初始化时的一些提供商,比如:Http模块，自定义service等；
    //不适合写太多的逻辑代码；
    /*constructer()constructor(
      public appState: AppState,public router:Router,http:Http,public envSvc:EnvSvc) {
      this.envSvc = envSvc;
    }
    */
    this.title = 'test comp1';
    this.name = this.name + 'in constructor.';
  }

  ngOnChanges(changes: SimpleChanges): void {
    //在组件数据绑定输入的值发生变化时执行，在本例中，app属性的输入发生变化时，即执行ngOnChanges
    //该方法的应用范围是：指令和组件
    console.log(changes);
    console.log('ngOnChanges ..');
  }

  ngOnInit() {
    //在第一次的ngOnChanges之后执行,此时即开始初始化组件/指令
    //该方法在一个 组件/指令 实例的生命周期中只执行一次
    //该方法的应用范围是：指令和组件
    this.init();
  }

  ngDoCheck(): void{
    //input的属性每次变化都会触发angular的变化检测
    // 在每次angular变化检测时执行ngDoCheck
    //该方法的应用范围是：指令和组件
    console.log('angular is checking changes  ');
  }

  ngAfterContentInit(): void {
    //在组件第一次接收数据输入之后，会将数据映射到组件模板
    //这个映射完成后执行ngAfterContentInit
    //该方法在一个 组件/指令 实例的生命周期中只执行一次
    //该方法的应用范围是：指令

    console.log('content has been inited...');
  }

  ngAfterContentChecked(): void {
    //在组件检查到数据变化之后，会将新的数据映射到组件模板
    //这个映射完成后执行ngAfterContentChecked
    //该方法的应用范围是：指令
    /*
    1.新的数据映射到模板之后，才开始创建视图，即ngAfterContentInit和ngAfterContentChecked在ngAfterViewInit之前执行，
    2.子组件的视图初始化或视图检查完成后才会触发当前组件的ngAfterViewInit或ngAfterViewChecked
       所以AppComponent的ngAfterViewChecked总是在所有字组件的视图都渲染完毕之后执行
    3.在初始化完成之后的每一次数据变化是，总是应用根组件的ngAfterContentChecked先执行，
      然后每个子组件/指令内 ngAfterContentChecked()->ngAfterViewChecked()依次执行，
      对整个应用而言，最后执行的方法是根组件的ngAfterViewChecked(),
    4.一个子组件的数据变化最先触发根组件的ngAfterContentChecked，
      然后是中间组件（根组件的子组件，变化组件的父级组件）的ngAfterContentChecked，
      之后是变化组件的ngAfterContentChecked()->ngAfterViewChecked()
      再执行父组件的ngAfterViewChecked(),
      最后才执行根组件的ngAfterViewChecked()
     */
    console.log('content has been checked...');
  }

  ngAfterViewInit(): void {
    //在初始化组件视图和子组件视图之后执行
    //AfterViewInit就是指：页面视图初始化之后
    //该方法在一个 组件/指令 实例的生命周期中执行一次
    //该方法的应用范围是：指令
    console.log('view has been inited...');
  }

  ngAfterViewChecked(): void {
    //在组件或子组件视图检查之后执行
    //在输入数据变化时，ng根据新的数据对页面进行检查和重新渲染
    //AfterViewChecked就是：视图检查之后
    //该方法的应用范围是：指令
    console.log('view has been checked...');
  }

  ngOnDestroy(): void{
    //在组件销毁时执行
    //一些组件如果在*ngIf指令之内，条件为false时，该组件会被销毁，此时会执行此方法
    //该方法在一个 组件/指令 实例的生命周期中执行一次
    //该方法的应用范围是：指令和组件
  }

  //将某个元素属性绑定到某个指令或者组件的属性
  @HostBinding('style.disable') 'disabled';
  //将某个事件绑定到组件
  @HostListener('click',['$event']) function(){alert('test component @HostListener')
  };
}