Question

在Angular2组件配置providers是我们可以指定的密钥之一。这些提供商是如何定义的以及它们用于什么？

@Component({
  ..
  providers: [..],
  ..
})

注意：

Angular2文档逐渐成熟但仍然稀少。它目前将提供商定义为：

用于服务的依赖注入提供程序数组组件需要。

这种递归定义并不是很有用。通过示例进行更详细的解释会非常有帮助。

Answer 1

提供者通常是单例（一个实例）对象，其他对象可以通过依赖注入（DI）访问。

如果您计划多次使用对象，例如在不同组件中使用Http服务，则可以请求该服务的相同实例（重用它）。你可以在DI的帮助下通过提供对DI为你创建的同一个对象的引用来做到这一点。

@Component){
  ..
  providers: [Http]
}

..而不是每次都创建新对象：

@Component){}
class Cmp {
  constructor() {
    // this is pseudo code, doens't work
    this.http = new Http(...options);
  }
}

这是一个近似值，但这是Dependency Injection背后的一般概念 - 让框架处理可重用对象的创建和维护... Provider 是Angular对这些可重用对象的术语（依赖关系））。

Answer 2

注册注射剂

供应商为Angular的DI知道注射剂，并定义注射剂（服务）的范围。

注射器层次结构

Angular的DI创建了一个注入器树（父＆gt;子＆gt;孙子＆gt; ...），类似于组件和指令的结构。

每个提供商的单个实例

每个注射器维护供应商。每个提供者都提供一个注射剂的单个实例。

提供商查询

当组件或指令具有依赖关系（构造函数参数）时，DI开始查找此组件的提供者注入器。如果它有一个，它从该提供者请求实例并注入它。

如果注入器没有所请求密钥（类型）的提供者，则访问父注入器，直到根（引导），直到找到提供者并且可以注入其实例。（如果没有找到提供者，则DI会抛出错误。）

定义可注射实例的范围

通过这种方式，您可以定义共享服务的范围，因为DI会从请求实例的组件开始查找，直到找到实例。

单身是否

您提供一个注射器的位数决定了将创建多少个实例（只有在实际请求时才会实例化它们。）

如果您需要整个应用程序的单个实例，那么在根组件（或使用bootstrap(AppComponent, [...])时仅提供一次的注射可导致相同的行为。

如果您想为每个组件A创建一个新实例，请将其添加到组件A的提供者。

（更新）NgModule懒惰且非懒惰

随着NgModule模块的引入，引入了更多级别。注册了非延迟加载模块的提供程序位于层次结构中的根组件之上。

延迟加载的模块位于由这些组件加载的组件和指令之上。

由于在创建注入器后提供程序是只读的，因此无法将延迟加载的模块中的提供程序添加到根注入器。因此，延迟加载的模块有自己的根范围。

另见https://stackoverflow.com/a/45231440/217408

Answer 3

将供应商视为一种告知角度如何注入服务的配方。

我们经常以这种方式声明提供者：

providers: [AnyService]

这只是一个简短的方法：

[new Provider(AnyService, {useClass: AnyService})]

这两种方法都说：每当有人要求＆＃34; AnyService＆＃34;时，提供课程＆＃34; AnyService＆＃34;

即使我在上面的示例中提供了相同的类，但在另一种情况下，我可以做到这样的事情。

[new Provider(AnyService, {useClass: AnyServiceCustom})]

但在这两种情况下，构造函数都保持不变：

constructor( private _anyService: AnyService) {
}

要更好地理解它，您需要了解依赖注入如何在Angular 2中工作，因为提供者与它直接相关。

这是每个角度2开发人员必读的内容。

https://angular.io/docs/ts/latest/guide/dependency-injection.html?The%20Provider%20class%20and%20provide%20function#!#injector-providers

Answer 4

添加@Sasxa词，我要指向Adam Freeman（第20章（使用服务提供商））的Pro Angular book，以提供更好，更清晰，更详细的解释，并附上精彩的示例。

提供程序是用于在Angular首次解决依赖关系时创建和管理服务对象的类。提供程序用于注册角模块作为服务分类。然后，此服务类可以在模块的自身创建阶段由其他组件使用。

“ 服务是提供通用功能以支持应用程序中其他构件的对象，例如指令，组件和管道。服务的重要之处在于它们的使用方式，即通过称为依赖注入的过程。使用服务可以提高Angular应用程序的灵活性和可伸缩性，但是依赖注入可能是一个很难理解的话题。” （Pro Angular（第20章））

实际上，服务可以通过依赖注入将对象作为服务扭曲。

import { Injectable } from "@angular/core";

export enum LogLevel {DEBUG, INFO, ERROR}

    @Injectable()
    export class LogService {
      minimumLevel: LogLevel = LogLevel.INFO;
      logInfoMessage(message: string){
       this.logMessage(LogLevel.INFO, message);
      }
    }

@Component({
     selector: "example",
     templateUrl: "example.component.html"
})
export class exampleComponent {

  constructor(logService: LogService) {};
  //to do impl
}

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
  imports:      [ BrowserModule ],
  providers:    [ LogService ],
  declarations: [ ExampleComponent],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Answer 5

import { service_name} from '../path';

@Component({

  selector: 'selector_name',     
  templateUrl: './html file name ',
  styleUrls: ['./css file name '],
  providers: [ ./'service_name'];

})
export class AppComponent {

  constructor(private Service_name: service_name) { 
    //enter code here
}

Angular2中的提供者是什么？

5 个答案: