Angular 2 中组件装饰器和 NgModule 装饰器提供者的区别答案

【问题标题】：Difference between providers of Component decorator and NgModule decorator in Angular 2Angular 2 中组件装饰器和 NgModule 装饰器提供者的区别
【发布时间】：2017-02-17 14:37:33
【问题描述】：

组件装饰器的providers数组

@Component({
    moduleId: module.id,
    selector:    'hero-list',
    templateUrl: './hero-list.component.html',
    providers:  [ HeroService ]
 })
 export class HeroListComponent implements OnInit {
    /* . . . */
 }

NgModule 装饰器的providers 数组

@NgModule({
  imports:      [ BrowserModule ],
  providers:    [ Logger ],
  declarations: [ AppComponent ],
  exports:      [ AppComponent ],
  bootstrap:    [ AppComponent ]
})

Angular2 中这两个提供者数组有什么区别？

【问题讨论】：

标签： angular

【解决方案1】：

不同之处在于提供程序可用的范围以及将创建多少个实例。

每个提供商的实例

如果你把它添加到一个组件中，这个组件的每个实例都会有它自己的服务实例，而对于非延迟加载的模块，整个应用程序只有一个实例。

范围

如果将其添加到组件中，则只有应用到它的组件和指令，以及该组件的后代才能注入实例。

分层注入和提供者查找

当组件注入服务时，DI 通过检查组件提供者、其父级和更远的祖先来查找它，直到找到匹配的提供者。如果在到达根组件 (AppComponent) 时找不到它，它会查看应用程序根范围 (@NgModule())。

延迟加载的模块

延迟加载的模块有自己的“根”作用域。这是因为注入器的提供者一旦初始化就无法修改，并且惰性模块最初不可用。因此延迟加载模块的提供者不会在全局范围内可用，只能在延迟加载模块的范围内使用。为了解决这个限制 forRoot() 被引入（主要是约定而不是某些功能）在根范围内注册提供程序，同时保持导入模块的其余部分惰性。

【讨论】：

延迟加载的模块是否有自己的应用程序模块中提供的服务实例，或者即使对于延迟模块，它们（服务）也作为单例注入？
AppModule 中提供的服务是用于惰性或非惰性加载代码的全局单例。延迟加载模块中提供的 serviced 仅可用于该延迟加载模块（以及延迟加载的所有其他模块）。如果在 AppModule 和中提供了一个服务，则有 2 个实例，并且惰性模块中的提供者会为惰性模块本身（以及惰性模块拖入的所有其他内容）隐藏 AppModule 中的提供者)，但其他所有内容都获取 AppModule 中提供的实例。