Question

我想知道使用依赖注入组件和@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';
    }
}

如您所见，这两种方法都可以访问compBComponent中的getName（）。

Answer 1

我认为名字应该足够明显......

@ViewChild为您提供在视图中创建的实际视图子项的引用。孩子的一生完全取决于当前成分的寿命。

Injectable component返回由Angular的DI模块创建的指定类（看起来是一个组件）的对象。这个对象的生命周期将由Angular的DI规则管理（你将providers array放入其中）。

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

使用的弹药（已更新至最终版）：http://plnkr.co/edit/dn9CiGUrswW2FQgLPWwW

Answer 2

使用 @viewChild 你什么都不用做，它会在每个时间点为你提供 child 的当前实例。

使用依赖注入...我们必须在父级中为子项显式添加提供程序，这将仅在第一次加载时提供子项实例..不会发生更改检测。

---父组件----

chmod u+rw folder -R *

---子组件---

import { ChildComponent } from './../child/child.component';
import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css'],
  //providers: [ChildComponent]
})
export class ParentComponent implements OnInit, AfterViewInit {
  @ViewChild(ChildComponent) _child: ChildComponent;
  constructor(
    //private _child: ChildComponent
  ) { }
  ngOnInit() {
  }
  ngAfterViewInit() {
    console.log(this._child.getName());
  }
  getChildName() {
    console.log(this._child.getName());
  }
}
<app-child></app-child>
<button (click)="getChildName()">Get Child</button>

Angular2依赖注入vs @ViewChild

2 个答案: