constructor 应用场景、angular2组件、@angular/core说明、

1：@Component装饰器

@Component里面的元数据会告诉 Angular 从哪里获取你为组件指定的主要的构建块。
@Component装饰器能接受一个配置对象， Angular 会基于这些信息创建和展示组件及其视图。

@Component的配置项包括：

selector： CSS 选择器，它告诉 Angular 在父级 HTML 中查找<hero-list>标签，创建并插入该组件。

templateUrl：组件 HTML 模板的模块相对地址，如前所示。

providers : 组件所需服务的依赖注入提供商数组。

styleUrls：当前组件引用的style样式

比如：

//app.component.ts  
import { Component } from '@angular/core';  
  
@Component({  
  selector: 'app-root',  
  templateUrl: './app.component.html',  
  styleUrls: ['./app.component.css']  
})  
  
export class AppComponent {  
  title = 'app';  
    
  method() {  
    console.log('test method');  
  }  
}

或者

import { Component } from '@angular/core';

@Component({
    template:`
      <h2>CRISIS CENTER</h2>
    `
})
export class CrisisCenterComponent{}

2、@Input

(1) Input 是属性装饰器，用来定义组件内的输入属性。在实际应用场合，我们主要用来实现父组件向子组件传递数据。

a) @Input()

第一步：子组件添加input装饰器装饰的属性

import {Component, Input, OnInit} from '@angular/core';  
import {NzMessageService} from 'ng-zorro-antd';  
import {HttpCommonService} from '../../service/http-common.service';  
  
@Component({  
  selector: 'app-step',  
  templateUrl: './step.component.html',  
  styleUrls: ['./step.component.css']  
})  
export class StepComponent implements OnInit {  
  @Input()  
  stepString: Array<string>;  
  
  constructor(private nzMessageService: NzMessageService, private httpService: HttpCommonService) {  
    console.log('constructor stepString的值:' + this.stepString); //undefined  
  }  
  
  ngOnInit() {  
    console.log('ngOnInit stepString的值:' + this.stepString);   //['common component']  
  }  
}

此时我们在子组件中有一个stepString属性，将由父组件传递数据。

第二步：父组件调用子组件传入数据

<p>  
  <app-step [stepString]="['common component']"></app-step>  
</p>

这样在子组件初始化的时候，就会获得['common component']数据。
但是注意，这个值的传递在执行构造函数的时候还没有获取，执行init方法的时候已经获取到了，至于原因可以看一下上面的生命周期执行的顺序。

b) @Input('bindingPropertyName')

Input 装饰器支持一个可选的参数，用来指定组件绑定属性的名称。如果没有指定，则默认使用 @Input 装饰器，装饰的属性名。

请看上面的例子中父组件用名为stepString的属性来传递数据，我们可以在子组件顶一个名称用于传递数据，假如我们使用value，那么我们只需要将上面的父子组件修改一下。

//子组件  
@Input('value')  
stepString: Array<string>;

//父组件  
<app-step [value]="['common component']"></app-step>

c) @Component() - inputs

我们可以将input用元数据声明，这样就不用在class文件中使用@input。例如将上面子组件改写一下。

import {Component, Input, OnInit} from '@angular/core';  
import {NzMessageService} from 'ng-zorro-antd';  
import {HttpCommonService} from '../../service/http-common.service';  
  
  
@Component({  
  selector: 'app-step',  
  templateUrl: './step.component.html',  
  styleUrls: ['./step.component.css'],  
  inputs: ['stepString:value'] // 类成员属性名称:绑定的输入属性名称  
})  
export class StepComponent implements OnInit {  
  stepString: Array<string>;  
  
  
  constructor(private nzMessageService: NzMessageService, private httpService: HttpCommonService) {  
    console.log('constructor stepString的值:' + this.stepString);  
  }  
  
  
  ngOnInit() {  
    console.log('ngOnInit stepString的值:' + this.stepString);  
  }  
}

@Input原文说明：https://blog.csdn.net/It_rod/article/details/79306364