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

 

二、@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原文說明：http://www.javashuo.com/article/p-qywbzhaj-nn.html

 

 

constructor 應用場景

 在 Angular 2 中，構造函數通常用於依賴注入或執行一些簡單的初始化操做。

 

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

@Component({
  selector: 'my-app',
  template: `
    <h1>Welcome to Angular World</h1>
    <p>Hello {{name}}</p>
  `,
})
export class AppComponent {
  name: string = '';

  constructor(public elementRef: ElementRef) { // 使用構造注入的方式注入依賴對象
    this.name = 'Semlinker'; // 執行初始化操做
  }
}

接下來看一個父-子組件傳參的例子：

parent.component.ts

 1 import { Component } from '@angular/core';
 2 
 3 @Component({
 4   selector: 'exe-parent',
 5   template: `
 6     <h1>Welcome to Angular World</h1>
 7     <p>Hello {{name}}</p>
 8     <exe-child [pname]="name"></exe-child>
 9   `,
10 })
11 export class ParentComponent {
12   name: string = '';
13 
14   constructor() {
15     this.name = 'Semlinker';
16   }
17 }

View Code

child.component.ts

 1 import { Component, Input, OnInit } from '@angular/core';
 2 
 3 @Component({
 4     selector: 'exe-child',
 5     template: `
 6      <p>父組件的名稱：{{pname}} </p>
 7     `
 8 })
 9 export class ChildComponent implements OnInit {
10     @Input()
11     pname: string; // 父組件的名稱
12 
13     constructor() {
14         console.log('ChildComponent constructor', this.pname); // Output：undefined
15     }
16 
17     ngOnInit() {
18         console.log('ChildComponent ngOnInit', this.pname);
19     }
20 }

View Code

以上代碼運行後，控制檯輸出結果：

ChildComponent constructor undefined
ChildComponent ngOnInit Semlinker

咱們發如今 ChildComponent 構造函數中，是沒法獲取輸入屬性的值，而在 ngOnInit 方法中，咱們能正常獲取輸入屬性的值。由於 ChildComponent 組件的構造函數會優先執行，當 ChildComponent 組件輸入屬性變化時會自動觸發 ngOnChanges 鉤子，而後在調用 ngOnInit 鉤子方法，因此在 ngOnInit 方法內能獲取到輸入的屬性。

angular2中constructor原文說明：  http://www.javashuo.com/article/p-yurldehr-eb.html