2016-08-01 5 views
3

依存性注入コンポーネントと@ViewChildの使用の違いは何ですか?どちらの方法でも、親属性メソッドを使用できます。それで、私は他人とするべきですか?Angular2依存性注入対@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'; 
    } 
} 

は、あなたが見ることができるように、両方の方法は、私がcompBComponent内のgetName()へのアクセス権を持って

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'; 
    } 
} 

を@ViewChild。

答えて

2

私は名前が十分に明らかにする必要があります...

@ViewChildはあなたのビュー内で作成、実際のビューの子への参照を与えると思います。子供の寿命は、現在のコンポーネントの寿命に完全に依存します。

Injectable componentは、AngularのDIモジュールで作成された(コンポーネントのように見える)指定されたクラスのオブジェクトを返します。このオブジェクトの存続期間は、AngularのDIルール(これはproviders arrayです)によって管理されます。

例では、Componentが注射可能オブジェクトであり、getName関数がコンポーネントではなくサービスに属している可能性が高いため、違いはありません。 Componentは、ユーザーに情報を表示したり、ユーザーから情報を取得する目に見えるモジュールとして設計されています。別の例を考えてみましょう。compBComponentに新しい名前を入力できる入力があり、getNameはユーザーの入力なしでコンテキスト外になります。この場合、DI compBComponentは無関係になります。

(決勝に更新)と遊ぶPlunkerは:http://plnkr.co/edit/dn9CiGUrswW2FQgLPWwW

+0

は、あなたの明確化をありがとう!どのように、いつ、いつ使うべきかはっきりしています!乾杯。 –

+0

プランナーを更新する必要があります。 – Shivam

+0

ちょうどしました。楽しい :) –