2016-08-01 158 views
3

我想知道使用依賴注入組件和@ViewChild有什麼區別。這兩種方式我都可以使用父屬性方法。所以,當我應該和其他人?Angular2依賴注入vs @ViewChild

依賴注入

import { Component, OnInit } from '@angular/core'; 
import { CompB } from './compb/compb.component'; 

@Component({ 
    moduleId: module.id, 
    selector: 'app-test', 
    templateUrl: 'compA.html' 
}) 
export class CompAComponent implements OnInit { 

    constructor(private _compB: CompB) { 
    } 
    ngOnInit() { 
     this._compB.getName(); 
    } 

} 

@Component({ 
    moduleId: module.id, 
    selector: 'app-test', 
    templateUrl: 'compB.html' 
}) 
export class CompBComponent { 
    getName() { 
     return 'Hello World'; 
    } 
} 

@ViewChild

import { Component, OnInit } from '@angular/core'; 
import { CompB } from './compb/compb.component'; 

@Component({ 
    moduleId: module.id, 
    selector: 'app-test', 
    templateUrl: 'compA.html' 
}) 
export class CompAComponent implements OnInit { 
    @ViewChild(CompB) compB: CompB 
    ngOnInit() { 
     this._compB.getName(); 
    } 

} 

@Component({ 
    moduleId: module.id, 
    selector: 'app-test', 
    templateUrl: 'compB.html' 
}) 
export class CompBComponent { 
    getName() { 
     return 'Hello World'; 
    } 
} 

正如你可以看到,這兩種方法我可以訪問的getName()在compBComponent。

回答

2

我認爲名字應該是明顯不夠......

@ViewChild給你參考到您的視圖中創建一個實際的視圖的孩子。孩子的一生完全取決於當前組件的生命週期。

Injectable component返回由Angular的DI模塊創建的指定類(看起來是一個組件)的對象。該對象的生命週期將由Angular的DI規則管理(您將其放入此providers array)。

在你的例子中,沒有什麼區別,因爲Component可以是一個可注入的對象,而你的getName函數更可能屬於服務而不是組件。 Component被設計成一個可見模塊,向用戶顯示信息或從中獲取信息。再舉一個例子,在compBComponent中有一個輸入,允許用戶輸入新名稱,如果沒有用戶輸入,getName將會脫離上下文。在這種情況下,DI compBComponent將變得不相關。

與之一起玩的調子(更新到最後):http://plnkr.co/edit/dn9CiGUrswW2FQgLPWwW

+0

謝謝您的澄清!現在很清楚應該如何以及何時使用它!乾杯。 –

+0

重擊者需要更新。 – Shivam

+0

只是。請享用 :) –