Angular 5 -> 组件中的提供者

Question

我有一个关于 Angular 5 组件的问题，我的组件如下：

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AuthService } from './../auth/auth.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css'],
  providers: [FormBuilder, AuthService]  // is this line needed?
})
export class LoginComponent implements OnInit {   

  constructor(private fb: FormBuilder, private authService: AuthService) { } 

  ngOnInit() {
  }
}

如果没有加上 providers: [FormBuilder, AuthService] 这一行，我会得到以下异常:

NullInjectorError: No provider for FormBuilder!

如果我添加 providers: [FormBuilder, AuthService] 那么一切都正常工作。我的问题是，这行代码真的必要吗？因为我在教程中看到了没有这行代码的组件（例如 Creating the Login component）。

- quma

---

是的，因为你在构造函数中注入它们。你也可以将它们添加到你的模块提供者中，这样你就不需要在每个组件中提供它们了。 - FAISAL

https://dev59.com/N1oU5IYBdhLWcg3wEz6N - Ramesh Rajendran

Answer 1

所以主要区别在于你将其注入到组件中，而教程是将其注入到模块中。

就像以下示例中的AppModule一样：

import { AuthService } from './../auth/auth.service';
import {FormsModule } from "@angular/forms";

@NgModule({
    modules: [
        FormsModule
    ],
    providers: [
        AuthService
    ]
})
export class AppModule { }

您可以在此处查看它被注入的方式的差异：https://dev59.com/f5_ha4cB1Zd3GeqP2Kak#42562446

- Jamie Rees

---

我明白了！非常感谢！ - quma

澄清一下，这不是“将其注入到您的组件”与“将其注入到模块”的问题。在两种情况下，您都将服务注入到组件中。区别在于，在一种情况下，您从组件的本地注入器提供服务，在另一种情况下，您从模块的注入器提供服务。当从模块提供时，所有注入它的人都将有一个服务实例，当从组件提供时，每个组件实例都将获得自己的服务实例。 - GreyBeardedGeek

Answer 2

如果您不想在组件中定义提供程序（您的服务），则应将其添加到模块的提供程序部分。 此处查看概述。

在您提供的链接中的课程中，作者使用ng来生成组件、服务等，因此它会自动创建以下结构（在模块级别定义提供程序）。

- Sh. Pavel

Answer 3

不需要那行代码，你可以将提供者添加到与组件所属的同一模块中，并通过构造函数注入服务。

- Fran