问题标签 [angular2-di]

我正在使用RC3. 我正在实施Angular2此处记录的新路由器：https ://angular.io/docs/ts/latest/guide/router.html

一切正常，但我在单元测试中遇到问题。具体来说，我无法将Angular2服务注入到我的单元测试中。

我的相关组件代码是：

我的单元测试看起来像：

“应该实例化组件”单元测试失败。错误是：

无法解析“ActivatedRoute”的所有参数（？、？、？、？、？）。确保所有参数都用 Inject 修饰或具有有效的类型注释，并且 'ActivatedRoute' 用 Injectable 修饰。

我如何让这个工作？

当我不注入时，ActivatedRoute一切正常。

谢谢。

我目前正在尝试XHRBackend为我的 angular2 应用程序创建自定义。我想使用 401 http 响应代码（未经授权）捕获所有 http 响应，以在登录页面上重定向用户。但我的问题来了：DI 无法Router在我的 custom-backend中加载。

似乎 DI 仍然使用 的元数据XHRBackend，因为定义了前 3 个参数。

我创建了一个 plunkr，演示了这个问题：http ://plnkr.co/edit/44imf9KpE06cIyQ395sg?p=preview

笔记：

plunkr 基于 angular2 路由器示例，不幸的是我没有足够的时间来创建一个更小的路由器。 重要的文件custom.backend.ts可能是main.ts.

有人知道，为什么会这样？

我正在尝试为XHRBackend该类创建一个包装器，并且我已经能够在最外层成功地创建和使用所有提供的服务，AppComponent但我无法将提供程序打包到实际服务本身中。我将类注入到组件构造函数中，但我无法想象这会破坏任何东西。

当前AppComponent代码：

所需AppComponent代码：

从后端包装器中导出的所需常量：

当我尝试这样做时One or more of providers for "AppComponent" were not defined，我的控制台中出现一个错误，因为XHRBackendWrapper找不到。我在这里想念什么？

我不能发布所有代码，因为它会使这个问题太大，但是，如果它有帮助，这是 XHRBackendWrapper 的一般想法：

Searching into Angular 2.0 source code (@angular/core": "2.0.0-rc.4) I found that first it contains two provider.d.ts definitions this is one aspect but other aspect is that all the classes in this provider.d.ts files and a lot of properties are marked as @deprecated.

I was looking on how to use Angular 2.0 DI outside of Angular Components. Since Angular 2.0 is in quite advanced state(Release Candidate) most of the API should be already stable with some minor changes possibly coming. Still all of this classes related in DI are marked as deprecated. In the same time all tutorials and examples in internet are with classes from this provider.d.ts files my question is. What this @deprecated flag means and should I use the API's in this provider.d.ts files or not ?

语境：

我有一个类将为我的 REST Api 形成 POST 请求，我们称之为requester。在我的应用程序中进行的每个 ajax 调用都将通过它发送。因此，我不想通过它提供 Http，bootstrap(foo, [HTTP_PROVIDERS]);这会使它成为全球性的，我需要将它注入到请求者

代码：

错误：

原始例外：没有 Http 的提供者！（请求者 -> Http）

（注意我使用的是 Angular 2 RC5）

为简单起见，我有一个这样的应用程序：

app.module.ts

根服务.ts

一个依赖的例子是：

依赖1.ts

我的问题是：为什么，在上述情况下，我会收到一个错误消息： No provider for PouchSync!.

我可以通过将 Dependency1 和 Dependency2 添加到app.module.tsproviders中的数组来解决问题，如下所示：

app.module.ts（固定）

这看起来很丑陋。只RootService需要了解这些依赖关系。我在这里做错了吗？或者有人可以解释为什么必须这样吗？当然，在注入时RootService，注入器可以看到它依赖于它Dependency1，Dependency2因此也必须注入它们，因此它们也将是应用程序范围的单例。

在 Angular 1 中，我经常使用工厂服务来存储许多组件可以访问的共享状态。看起来在 Angular 2 中，所有作为 @Injectable() 注入的服务每次都被创建，因此失去了共享状态。

我在根模块的providers元键上“注册”了服务，但我仍然得到一个临时实例。

我有的：

然后在组件中调用它：

以及模块的定义：

我怀疑可能有其他方式来“注册”它，ArtistService所以它作为静态实例保持加载？这可以通过 DI 实现还是需要手动创建静态实例方法？

更新：
原来上面的代码确实有效。我在错误的地方寻找导致数据无法正确缓存的逻辑错误。

上面的代码有效，并且在顶级 AppModuleproviders的部分中分配服务是使父引用在 AppComponent 的持续时间内保持加载的关键。在提供Singleton实例的应用程序的生命周期内有效地保持加载状态。

要获取瞬态实例，您可以在实际组件上providers声明元标记和服务名称，然后在加载/重新加载组件时创建服务。

我正在尝试在 Angular 2 中创建通用数据服务，但遇到了一个奇怪的错误。本质上，我正在创建一个 HTTP 服务，其方法包含 api url 的一部分，以便我可以在多种情况下使用它。例如，我想传入 'projects/' 并将其与 'api/' 连接以获取 'api/projects/'，然后我可以在 http 调用中使用它。

我当前的dataService.ts：

我试图使用“项目”作为参数调用 GetAll 的组件来自：

我确实在我的 app.module.ts 中将服务添加为提供程序。还有一点需要注意的是，我在这里展示的组件是一个名为 HomeComponent 的组件的子组件，它位于 AppComponent 中。

这就是 HomeComponent 的样子：

错误：

我知道它在抱怨我传递给 GetCall 的字符串，但我就是不知道为什么。

任何帮助，将不胜感激！

我正在编写一个依赖于TemplateRef<any>and的指令ViewContainerRef。但是我的指令无法注入这些依赖项。以下是我的所有代码：

main.ts

app.module.ts

app.component.ts

HelloWorld.directive.ts

这是我转译的 HelloWorld.directive.js：

然后我运行我的应用程序，我收到以下错误：

错误：（SystemJS）无法解析 HelloWorld 的所有参数：（？，？）。

错误：无法解析 HelloWorld 的所有参数：(?, ?)。在 CompileMetadataResolver.getDependenciesMetadata ( http://localhost:5000/node_modules/@angular/compiler/bundles/compiler.umd.js:14268:21 ) 在 CompileMetadataResolver.getTypeMetadata ( http://localhost:5000/node_modules/@angular/ compiler/bundles/compiler.umd.js:14169:28 ) 在 CompileMetadataResolver.getDirectiveMetadata ( http://localhost:5000/node_modules/@angular/compiler/bundles/compiler.umd.js:13944:30 ) 在 eval ( http ://localhost:5000/node_modules/@angular/compiler/bundles/compiler.umd.js:14037:51 ) 在 Array.forEach (native) 在 CompileMetadataResolver.getNgModuleMetadata (http://localhost:5000/node_modules/@angular/compiler/bundles/compiler.umd.js:14031:51 ) 在 RuntimeCompiler._compileComponents ( http://localhost:5000/node_modules/@angular/compiler/bundles/compiler .umd.js:16721:49 ) 在 RuntimeCompiler._compileModuleAndComponents ( http://localhost:5000/node_modules/@angular/compiler/bundles/compiler.umd.js:16659:39 ) 在 RuntimeCompiler.compileModuleAsync ( http:// localhost:5000/node_modules/@angular/compiler/bundles/compiler.umd.js:16650:23 ) 在 PlatformRef_._bootstrapModuleWithZone ( http://localhost:5000/node_modules/@angular/core/bundles/core.umd.js :6707:29 ) 评估http://localhost:5000/ViewContainerRefApp/main.js 在 CompileMetadataResolver.getDependenciesMetadata ( http://localhost:5000/node_modules/@angular/compiler/bundles/compiler.umd.js:14268:21 ) 处 加载http://localhost:5000/ViewContainerRefApp/main.js时出错。 GetTypeMetadata ( http://localhost:5000/node_modules/@angular/compiler/bundles/compiler.umd.js:14169:28 ) 在 CompileMetadataResolver.getDirectiveMetadata ( http://localhost:5000/node_modules/@angular/compiler/bundles /compiler.umd.js:13944:30 ) 在 eval ( http://localhost:5000/node_modules/@angular/compiler/bundles/compiler.umd.js:14037:51 ) 在 Array.forEach (native) 在 CompileMetadataResolver .getNgModuleMetadata (http://localhost:5000/node_modules/@angular/compiler/bundles/compiler.umd.js:14031:51 ) 在 RuntimeCompiler._compileComponents ( http://localhost:5000/node_modules/@angular/compiler/bundles/compiler .umd.js:16721:49 ) 在 RuntimeCompiler._compileModuleAndComponents ( http://localhost:5000/node_modules/@angular/compiler/bundles/compiler.umd.js:16659:39 ) 在 RuntimeCompiler.compileModuleAsync ( http:// localhost:5000/node_modules/@angular/compiler/bundles/compiler.umd.js:16650:23 ) 在 PlatformRef_._bootstrapModuleWithZone ( http://localhost:5000/node_modules/@angular/core/bundles/core.umd.js :6707:29 ) 评估http://localhost:5000/ViewContainerRefApp/main.js 加载http://localhost:5000/ViewContainerRefApp/main.js 时出错

我还从这个实时示例中复制了代码，我得到了同样的错误。

似乎TemplateRef<any>andViewContainerRef没有metadata注册。但我找不到原因。任何人都可以帮助我吗？谢谢你。

我在 ASP.NET Core 中使用带有 TypeScript 的 Angular 2.0.0。我的目标是根据服务器端变量在我的应用程序中创建 AppConfig 服务。在其他几个答案的帮助下，我能够创建以下代码：

索引.cshtml

应用程序.config.ts

main.ts

app.module.ts

仪表板.service.ts

来自 Chrome 控制台的输出

正如您所看到的，由于某种原因，created 和 injectionAppConfig不一样，并且apiUrlvalue 没有出现在DashboardService. 我怀疑错误在这里的某个地方：

但我对 Angular2 很陌生，不知道如何解决它。你能指出问题出在哪里吗？