服务实例不可用于angular2中的子组件 [英] Service instance is not available for child component in angular2

查看：72
本文介绍了服务实例不可用于angular2中的子组件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我已经创建了一些应该在整个应用程序内共享的服务，但是由于某些原因，子组件会抛出错误 Error: DI Exception at NoProviderError.BaseException [as constructor] 我已经在启动文件中提供了所有服务

I have created some services which should be shared within whole application but for some reason child components are throwing error Error: DI Exception at NoProviderError.BaseException [as constructor] I have provided all the services inside boot file

bootstrap(AppComponent, [
    JwtHelper,
    HTTP_PROVIDERS, authervice, ROUTER_PROVIDERS, 
    categoryService,
    Configuration
]);

有人可以提出建议吗?如果您需要更多说明或代码，请告诉我.

can anyone suggest something? if you need more explanation or code let me know.

类别组件

import ...
import {categoryService}       from './categoryService';
@Component({
    selector: 'category-list',
    template: `...`,
    directives: [],
    styles: ['.error {color:red;}'],
    providers: []

})
export class categoryComponent implements OnInit {
    constructor(private _categoryService: categoryService) { }
    ...
}

如果我在上面的提供者中添加了categoryservice，它会起作用，否则会引发错误

If i add categoryservice in providers above it works otherwise throws error

完整错误

例外:错误:未捕获(承诺中):例外:错误:: 0:0 原来的例外:没有categoryService的提供者！原版的 堆栈跟踪:错误:DI异常 在NoProviderError.BaseException [作为构造函数]( http://localhost:58056/libs/@angular/core/src/facade/exceptions.js:17:23 ) 在NoProviderError.AbstractProviderError [作为构造函数]( http://localhost:58056/libs/@angular/core/src/di/reflective_exceptions.js:39:16 ) 在新的NoProviderError( http://localhost:58056/libs/@angular/core/src/di/reflective_exceptions.js:75:16 ) 在ReflectiveInjector _._ throwOrNull( http://localhost:58056/libs/@angular/core/src/di/reflective_injector.js:776:19 ) at ReflectiveInjector _._ getByKeyDefault( http://localhost:58056/libs/@angular/core/src/di/reflective_injector.js:804:25 ) 在ReflectiveInjector _._ getByKey( http://localhost:58056/libs/@angular/core/src/di/reflective_injector.js:767:25 ) 在ReflectiveInjector_.get( http://localhost:58056/libs/@angular/core/src/di/reflective_injector.js:576:21 ) 在ElementInjector.get( http://localhost:58056/libs/@angular/core/src/linker/element_injector.js:23:48 ) 在ElementInjector.get( http://localhost:58056/libs/@angular/core/src/linker/element_injector.js:23:48 ) at ReflectiveInjector _._ getByKeyDefault( http://localhost:58056/libs/@angular/core/src/di/reflective_injector.js:801:24 ) 错误上下文:[object Object] zone.js:461未处理的承诺 拒绝:EXCEPTION:错误:0:0原始EXCEPTION:没有提供者 用于categoryService！原始堆栈:错误:DI异常 在NoProviderError.BaseException [作为构造函数]( http://localhost:58056/libs/@angular/core/src/facade/exceptions.js:17:23 ) 在NoProviderError.AbstractProviderError [作为构造函数]( http://localhost:58056/libs/@angular/core/src/di/reflective_exceptions.js:39:16 ) 在新的NoProviderError( http://localhost:58056/libs/@angular/core/src/di/reflective_exceptions.js:75:16 ) 在ReflectiveInjector _._ throwOrNull( http://localhost:58056/libs/@angular/core/src/di/reflective_injector.js:776:19 ) at ReflectiveInjector _._ getByKeyDefault( http://localhost:58056/libs/@angular/core/src/di/reflective_injector.js:804:25 ) 在ReflectiveInjector _._ getByKey( http://localhost:58056/libs/@angular/core/src/di/reflective_injector.js:767:25 ) 在ReflectiveInjector_.get( http://localhost:58056/libs/@angular/core/src/di/reflective_injector.js:576:21 ) 在ElementInjector.get( http://localhost:58056/libs/@angular/core/src/linker/element_injector.js:23:48 ) 在ElementInjector.get( http://localhost:58056/libs/@angular/core/src/linker/element_injector.js:23:48 ) at ReflectiveInjector _._ getByKeyDefault( http://localhost:58056/libs/@angular/core/src/di/reflective_injector.js:801:24 ) 错误上下文:[object Object];区域:角；任务:Promise.then; 值:ViewWrappedException {_wrapperMessage:错误:0:0"， _originalException:NoProviderError，_originalStack:错误:DIException↵在 NoProviderError.BaseExc…ngular/core/src/di/reflective_injector.js:801:24)， _context:DebugContext，_wrapperStack:错误:在ViewWrappedException.W…:0:0↵中发生错误……本地主机:58056/libs/zone.js/dist/zone.js:322:35)"} consoleError @ zone.js:461_loop_1 @ zone.js:490drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426 zone.js:463错误:未捕获 (按承诺):例外::0:0中的错误原始例外:没有提供者 用于categoryService！原始堆栈:错误:DI异常 在NoProviderError.BaseException [作为构造函数]( http://localhost:58056/libs/@angular/core/src/facade/exceptions.js:17:23 ) 在NoProviderError.AbstractProviderError [作为构造函数]( http://localhost:58056/libs/@angular/core/src/di/reflective_exceptions.js:39:16 ) 在新的NoProviderError( http://localhost:58056/libs/@angular/core/src/di/reflective_exceptions.js:75:16 ) 在ReflectiveInjector _._ throwOrNull( http://localhost:58056/libs/@angular/core/src/di/reflective_injector.js:776:19 ) at ReflectiveInjector _._ getByKeyDefault( http://localhost:58056/libs/@angular/core/src/di/reflective_injector.js:804:25 ) 在ReflectiveInjector _._ getByKey( http://localhost:58056/libs/@angular/core/src/di/reflective_injector.js:767:25 ) 在ReflectiveInjector_.get( http://localhost:58056/libs/@angular/core/src/di/reflective_injector.js:576:21 ) 在ElementInjector.get( http://localhost:58056/libs/@angular/core/src/linker/element_injector.js:23:48 ) 在ElementInjector.get( http://localhost:58056/libs/@angular/core/src/linker/element_injector.js:23:48 ) at ReflectiveInjector _._ getByKeyDefault( http://localhost:58056/libs/@angular/core/src/di/reflective_injector.js:801:24 ) 错误内容:[对象对象] 在NoProviderError.BaseException [作为构造函数]( http://localhost:58056/libs/@angular/core/src/facade/exceptions.js:17:23 ) 在NoProviderError.AbstractProviderError [作为构造函数]( http://localhost:58056/libs/@angular/core/src/di/reflective_exceptions.js:39:16 ) 在新的NoProviderError( http://localhost:58056/libs/@angular/core/src/di/reflective_exceptions.js:75:16 ) 在ReflectiveInjector _._ throwOrNull( http://localhost:58056/libs/@angular/core/src/di/reflective_injector.js:776:19 ) at ReflectiveInjector _._ getByKeyDefault( http://localhost:58056/libs/@angular/core/src/di/reflective_injector.js:804:25 ) 在ReflectiveInjector _._ getByKey( http://localhost:58056/libs/@angular/core/src/di/reflective_injector.js:767:25 ) 在ReflectiveInjector_.get( http://localhost:58056/libs/@angular/core/src/di/reflective_injector.js:576:21 ) 在ElementInjector.get( http://localhost:58056/libs/@angular/core/src/linker/element_injector.js:23:48 ) 在ElementInjector.get( http://localhost:58056/libs/@angular/core/src/linker/element_injector.js:23:48 ) at ReflectiveInjector _._ getByKeyDefault( http://localhost:58056/libs/@angular/core/src/di/reflective_injector.js:801:24 ) 错误内容:[对象对象] 在resolvePromise( http://localhost:58056/libs/zone中. js/dist/zone.js:538:32 ) 在 http://localhost:58056/libs/zone.js/dist/zone.js:574:18 在ZoneDelegate.invokeTask( http://localhost:58056/libs/zone.js/dist/zone.js:356:38 ) 在Object.NgZoneImpl.inner.inner.fork.onInvokeTask( http://localhost:58056/libs/@angular/core/src/zone/ng_zone_impl.js:36:41 ) 在ZoneDelegate.invokeTask( http://localhost:58056/libs/zone.js/dist/zone.js:355:43 ) 在Zone.runTask( http://localhost:58056/libs/zone.js/dist/zone.js:256:48 ) 在排水微任务队列( http://localhost:58056/libs/zone中. js/dist/zone.js:474:36 ) 在XMLHttpRequest.ZoneTask.invoke( http://localhost: 58056/libs/zone.js/dist/zone.js:426:22)consoleError @ zone.js:463_loop_1 @ zone.js:490drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426

EXCEPTION: Error: Uncaught (in promise): EXCEPTION: Error in :0:0 ORIGINAL EXCEPTION: No provider for categoryService! ORIGINAL STACKTRACE: Error: DI Exception at NoProviderError.BaseException [as constructor] (http://localhost:58056/libs/@angular/core/src/facade/exceptions.js:17:23) at NoProviderError.AbstractProviderError [as constructor] (http://localhost:58056/libs/@angular/core/src/di/reflective_exceptions.js:39:16) at new NoProviderError (http://localhost:58056/libs/@angular/core/src/di/reflective_exceptions.js:75:16) at ReflectiveInjector_._throwOrNull (http://localhost:58056/libs/@angular/core/src/di/reflective_injector.js:776:19) at ReflectiveInjector_._getByKeyDefault (http://localhost:58056/libs/@angular/core/src/di/reflective_injector.js:804:25) at ReflectiveInjector_._getByKey (http://localhost:58056/libs/@angular/core/src/di/reflective_injector.js:767:25) at ReflectiveInjector_.get (http://localhost:58056/libs/@angular/core/src/di/reflective_injector.js:576:21) at ElementInjector.get (http://localhost:58056/libs/@angular/core/src/linker/element_injector.js:23:48) at ElementInjector.get (http://localhost:58056/libs/@angular/core/src/linker/element_injector.js:23:48) at ReflectiveInjector_._getByKeyDefault (http://localhost:58056/libs/@angular/core/src/di/reflective_injector.js:801:24) ERROR CONTEXT: [object Object] zone.js:461 Unhandled Promise rejection: EXCEPTION: Error in :0:0 ORIGINAL EXCEPTION: No provider for categoryService! ORIGINAL STACKTRACE: Error: DI Exception at NoProviderError.BaseException [as constructor] (http://localhost:58056/libs/@angular/core/src/facade/exceptions.js:17:23) at NoProviderError.AbstractProviderError [as constructor] (http://localhost:58056/libs/@angular/core/src/di/reflective_exceptions.js:39:16) at new NoProviderError (http://localhost:58056/libs/@angular/core/src/di/reflective_exceptions.js:75:16) at ReflectiveInjector_._throwOrNull (http://localhost:58056/libs/@angular/core/src/di/reflective_injector.js:776:19) at ReflectiveInjector_._getByKeyDefault (http://localhost:58056/libs/@angular/core/src/di/reflective_injector.js:804:25) at ReflectiveInjector_._getByKey (http://localhost:58056/libs/@angular/core/src/di/reflective_injector.js:767:25) at ReflectiveInjector_.get (http://localhost:58056/libs/@angular/core/src/di/reflective_injector.js:576:21) at ElementInjector.get (http://localhost:58056/libs/@angular/core/src/linker/element_injector.js:23:48) at ElementInjector.get (http://localhost:58056/libs/@angular/core/src/linker/element_injector.js:23:48) at ReflectiveInjector_._getByKeyDefault (http://localhost:58056/libs/@angular/core/src/di/reflective_injector.js:801:24) ERROR CONTEXT: [object Object] ; Zone: angular ; Task: Promise.then ; Value: ViewWrappedException {_wrapperMessage: "Error in :0:0", _originalException: NoProviderError, _originalStack: "Error: DI Exception↵ at NoProviderError.BaseExc…ngular/core/src/di/reflective_injector.js:801:24)", _context: DebugContext, _wrapperStack: "Error: Error in :0:0↵ at ViewWrappedException.W…localhost:58056/libs/zone.js/dist/zone.js:322:35)"}consoleError @ zone.js:461_loop_1 @ zone.js:490drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426 zone.js:463 Error: Uncaught (in promise): EXCEPTION: Error in :0:0 ORIGINAL EXCEPTION: No provider for categoryService! ORIGINAL STACKTRACE: Error: DI Exception at NoProviderError.BaseException [as constructor] (http://localhost:58056/libs/@angular/core/src/facade/exceptions.js:17:23) at NoProviderError.AbstractProviderError [as constructor] (http://localhost:58056/libs/@angular/core/src/di/reflective_exceptions.js:39:16) at new NoProviderError (http://localhost:58056/libs/@angular/core/src/di/reflective_exceptions.js:75:16) at ReflectiveInjector_._throwOrNull (http://localhost:58056/libs/@angular/core/src/di/reflective_injector.js:776:19) at ReflectiveInjector_._getByKeyDefault (http://localhost:58056/libs/@angular/core/src/di/reflective_injector.js:804:25) at ReflectiveInjector_._getByKey (http://localhost:58056/libs/@angular/core/src/di/reflective_injector.js:767:25) at ReflectiveInjector_.get (http://localhost:58056/libs/@angular/core/src/di/reflective_injector.js:576:21) at ElementInjector.get (http://localhost:58056/libs/@angular/core/src/linker/element_injector.js:23:48) at ElementInjector.get (http://localhost:58056/libs/@angular/core/src/linker/element_injector.js:23:48) at ReflectiveInjector_._getByKeyDefault (http://localhost:58056/libs/@angular/core/src/di/reflective_injector.js:801:24) ERROR CONTEXT: [object Object] at NoProviderError.BaseException [as constructor] (http://localhost:58056/libs/@angular/core/src/facade/exceptions.js:17:23) at NoProviderError.AbstractProviderError [as constructor] (http://localhost:58056/libs/@angular/core/src/di/reflective_exceptions.js:39:16) at new NoProviderError (http://localhost:58056/libs/@angular/core/src/di/reflective_exceptions.js:75:16) at ReflectiveInjector_._throwOrNull (http://localhost:58056/libs/@angular/core/src/di/reflective_injector.js:776:19) at ReflectiveInjector_._getByKeyDefault (http://localhost:58056/libs/@angular/core/src/di/reflective_injector.js:804:25) at ReflectiveInjector_._getByKey (http://localhost:58056/libs/@angular/core/src/di/reflective_injector.js:767:25) at ReflectiveInjector_.get (http://localhost:58056/libs/@angular/core/src/di/reflective_injector.js:576:21) at ElementInjector.get (http://localhost:58056/libs/@angular/core/src/linker/element_injector.js:23:48) at ElementInjector.get (http://localhost:58056/libs/@angular/core/src/linker/element_injector.js:23:48) at ReflectiveInjector_._getByKeyDefault (http://localhost:58056/libs/@angular/core/src/di/reflective_injector.js:801:24) ERROR CONTEXT: [object Object] at resolvePromise (http://localhost:58056/libs/zone.js/dist/zone.js:538:32) at http://localhost:58056/libs/zone.js/dist/zone.js:574:18 at ZoneDelegate.invokeTask (http://localhost:58056/libs/zone.js/dist/zone.js:356:38) at Object.NgZoneImpl.inner.inner.fork.onInvokeTask (http://localhost:58056/libs/@angular/core/src/zone/ng_zone_impl.js:36:41) at ZoneDelegate.invokeTask (http://localhost:58056/libs/zone.js/dist/zone.js:355:43) at Zone.runTask (http://localhost:58056/libs/zone.js/dist/zone.js:256:48) at drainMicroTaskQueue (http://localhost:58056/libs/zone.js/dist/zone.js:474:36) at XMLHttpRequest.ZoneTask.invoke (http://localhost:58056/libs/zone.js/dist/zone.js:426:22)consoleError @ zone.js:463_loop_1 @ zone.js:490drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426

推荐答案

SystemJs (区分大小写)(设计使然).如果您在项目文件中使用不同的路径名，如下所示:

SystemJs is case sensitive (by design). If you use different path name in your project files like this:

main.ts

main.ts

import { categoryService } from './categoryService';

category-component.ts

category-component.ts

import { categoryService } from './categoryservice';

然后System js将进行双重导入

then System js will make double imports

这样，angular2将在提供程序Map密钥中找到服务对象的其他实例.

This way angular2 will find other instance of service object in providers Map keys.

尽管键存在于Map对象中.

Despite the fact that key exists in Map object.

has方法将返回false.这就是为什么您收到错误消息的原因.

has method of Map will return false. That's why you're receiving an error.

另请参见本页上有关Map对象内键相等性的更多信息

See also more information about key equality within Map object at this page https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Map#Key_equality

这篇关于服务实例不可用于angular2中的子组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆