Angular2 依赖注入(inject)与@ViewChild

Question

我想知道使用依赖注入(inject)组件和@ViewChild 有什么区别。我可以使用父属性方法的两种方式。那么，我什么时候应该一个和另一个？

依赖注入(inject)

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

如您所见，我可以访问 compBComponent 中的 getName() 的这两种方法。

Answer 1

我觉得名字应该够明显了...

@ViewChild 为您提供对在您的 View 中创建的实际 View 子项的引用。 child 的生命周期完全取决于当前组件的生命周期。

Injectable component 返回由 Angular 的 DI 模块创建的指定类(看起来是一个组件)的对象。该对象的生命周期将由 Angular 的 DI 规则管理(您将其放入哪个 providers 数组)。

在您的示例中，没有区别，因为 Component 可以是可注入(inject)对象，而您的 getName 函数更可能属于服务，而不是组件。 Component 被设计成一个可见的模块，向用户显示信息或从他们那里取回信息。让我们再举一个例子，您在 compBComponent 中有一个输入允许用户输入新名称，并且 getName 将在没有用户输入的情况下脱离上下文。在这种情况下，DI compBComponent 将变得无关紧要。

Plunker 一起玩(更新到最终版本):http://plnkr.co/edit/dn9CiGUrswW2FQgLPWwW