angular - 在 Angular 2 的构造函数中声明服务实例

Question

我是 Angular 2 和 Typescript 的新手，正在尝试了解 DI。在我看到的所有代码中，我看到引用服务的变量被键入到构造函数中。这是为什么？为什么我们不能在构造函数外而是在类内声明它呢？

考虑以下英雄之旅中的代码，例如在 Angular 网站上:

import { Component, OnInit } from '@angular/core';
import { Hero } from './hero';
import { HeroService } from './hero.service';

@Component({
    moduleId: module.id,
    selector: 'my-dashboard',
    templateUrl: `dashboard.component.html`,
    styleUrls: ['dashboard.component.css']
})
export class DashboardComponent implements OnInit {

    heroes: Hero[] = [];

    constructor(private heroService: HeroService) { }

    ngOnInit(): void {
        this.heroService.getHeroes()
            .then(heroes => this.heroes = heroes.slice(1, 5));
    }
}

如果我像下面这样在构造函数外声明 heroService，应用程序会抛出很多错误。

export class DashboardComponent implements OnInit {

    heroes: Hero[] = [];

    constructor() { }

    private heroService: HeroService;

    ngOnInit(): void {
        this.heroService.getHeroes()
            .then(heroes => this.heroes = heroes.slice(1, 5));
    }
}

据我了解，在构造函数之外编写它不会生成服务类 HeroService 的实例，但为什么呢？ (它是 Angular 的东西还是 TypeScript？)在这个例子中，Hero 也是一个类(虽然不是服务类，但在技术上仍然是一个类!)，我们已经声明了 heroes: Hero[] = []; 在构造函数之外，并且有效。

Answer 1

Angular DI 检查构造函数参数，当 Angular DI 创建类(服务、组件、指令、管道)的新实例时，它会查找匹配的提供程序以传递给构造函数。

因此，

• 注入(inject)仅适用于 DI 实例化的类

• 只考虑构造函数参数进行注入(inject)