@NgModule({

  bootstrap: [ AppComponent ],

  ....

}

declarations: [

    FriendsComponent,

    ChatsComponent

]

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')

  };

}