Angular 2 依赖注入 - 如何知道在哪里插入依赖答案

【问题标题】：Angular 2 dependecy injection - how to know where to insert dependenciesAngular 2 依赖注入 - 如何知道在哪里插入依赖
【发布时间】：2017-02-23 19:22:28
【问题描述】：

我正在学习 angular2，有时发现自己有点困惑在哪里注入依赖项。比如当使用RouteParams

import {RouteParams} from 'angular2/router';

我们只需将它传递给构造函数，我们就可以开始了：

constructor(private _photoService: PhotoService, private _routeParams: RouteParams){
    }

但是，当我们使用来自同一模块的ROUTER_DIRECTIVES 'angular2/router'

import {ROUTER_DIRECTIVES} from 'angular2/router';

我们需要将它传递给组件的指令数组：

directives: [ROUTER_DIRECTIVES]

所以，我的问题是，我怎么知道我需要将它传递到哪里，何时将依赖项传递给指令或提供程序数组，或者只是传递给构造函数方法？

【问题讨论】：

如果它们是指令，它是declarations（不是directives！）。如果他们是提供者，则为providers。如果您将providers 中未定义的提供程序传递给构造函数，它将引发错误。它是如此简单。您正在使用一些真正过时的示例（alpha 或 beta）中的代码。我建议 RTM，而不是旧教程。很长一段时间都不需要从路由器模块显式导入指令和提供程序。
ROUTER_DIRECTIVES 已经过时了。您使用的是什么 Angular 版本？它应该是RouterModule 并进入imports: [...] 的@NgModule()

标签： javascript angular

【解决方案1】：

依赖关系是根据它们的作用来定义的。

有一种疯狂的方法，但当你确定开始时，它是压倒性的。查看https://angular.io/docs/ts/latest/guide/architecture.html的文档

基本上指令操作 DOM，依赖注入注入一个完整的类（及其所有依赖项）等等。所以有特定的方式/位置告诉 Angular 什么是什么。

希望这些文档可以帮助您解决问题。大约在页面的中间，它开始讨论指令和注入。

【讨论】：

【解决方案2】：

DI 使用提供者来创建和保存值。

在哪里注册提供者 @NgModule({providers: []})、@Component({providers: []}) 或 @Directive({providers: []}) 定义了将传递给依赖它们的构造函数的值或实例。

如果您在非延迟加载的@NgModule() 中注册提供程序，DI 将在其根范围内为整个应用程序提供单个实例。

如果您在 @Component() 或 `@Directive() 上注册提供程序，那么 DI 将为每个组件或指令实例提供一个实例。

如果MyComponent 提供服务A 并且您的页面上有5 个MyComponent 实例，那么将有最多5 个A 实例（提供者仅在第一个请求时创建一个实例时间）。

当组件、指令或管道具有构造函数参数时，DI 将尝试查找与参数类型或@Inject() 装饰器（如果有）匹配的提供程序。 DI 开始查看提供程序的主机组件，并将其持有的实例传递给构造函数。如果宿主组件没有提供匹配的提供者，DI 会继续查看父组件，直到找到一个。如果它到达根组件 (AppComponent) 并且仍然没有找到提供者，它会检查根范围 (@NgModule() 提供者)。

延迟加载的模块有点特殊，因为在其中注册的提供程序无法添加到根范围。一旦创建了范围（注入器），就无法注册新的提供者。

延迟加载的模块为应用程序根范围创建一个子范围。在那里注册的提供者将仅对作为延迟加载模块（以及使用延迟加载模块加载的导入模块）一部分的组件、指令、管道和服务可见。

【讨论】：