服务实例不适用于angular2中的子组件

Question

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

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

任何人都可以建议吗？如果您需要更多解释或代码,请告诉我.

类别组件

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,否则会抛出错误

完全错误

EXCEPTION:错误:未捕获(在承诺中):EXCEPTION:错误:0:0原始异常:没有categoryService的提供者!ORIGINAL堆栈跟踪:错误:在NoProviderError.BaseException DI异常[作为构造](HTTP://本地主机: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)在ReflectiveInjector _._ getByKeyDefault(http:/ /localhost:58056/libs/@angular/core/src/di/reflective_injector.js:804:25)在ReflectiveInjector _._ getByKey(HTTP://本地主机:58056 /库/ @角/型芯/ SRC /二/ reflective_injector. js:767:25)在RefInInjector.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)在Elemen refInjector _._ getByKeyDefault(http:// localhost:58056/libs/@ angular/core)中的tInjector.get(http:// localhost:58056/libs/@angular/core/src/linker/element_injector.js:23:48)/src/di/reflective_injector.js:801:24)错误上下文:[object Object] zone.js:461未处理的Promise拒绝:EXCEPTION:错误:0:0原始异常:没有categoryService的提供者!ORIGINAL STACKTRACE:错误:NoProviderError.BaseException [作为构造函数]的DI异常(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)在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)在RefInInjector.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)在Elemen refInjector _._ getByKeyDefault(http:// localhost:58056/libs/@ angular/core)中的tInjector.get(http:// localhost:58056/libs/@angular/core/src/linker/element_injector.js:23:48)/src/di/reflective_injector.js:801:24)错误上下文:[object Object]; 区域:角; 任务:Promise.then; 值:ViewWrappedException {_wrapperMessage:"错误:0:0",_原始异常:NoProviderError,_originalStack:"错误:DI异常↵在NoProviderError.BaseExc ... ngular/core/src/di/reflective_injector.js:801:24)", _context:DebugContext,_wrapperStack:"错误:错误:0:0↵在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错误:未捕获的(在承诺):异常:错误:0:0原始异常:无提供categoryService!ORIGINAL STACKTRACE:错误:NoProviderError.BaseException [作为构造函数]的DI异常(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)在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)在RefInInjector.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)在Elemen refInjector _._ getByKeyDefault(http:// localhost:58056/libs/@ angular/core)中的tInjector.get(http:// localhost:58056/libs/@angular/core/src/linker/element_injector.js:23:48)/src/di/reflective_injector.js:801:24)错误上下文:NoProviderError.BaseException [作为构造函数]的[object Object](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://本地主机:58056/libs/@angular/core/src/di/reflective_exceptions.js:75:16)在ReflectiveInjector _._ throwOrNull(HTTP://本地主机:58056/libs/@angular/core/src/di/reflective_injector.js :776:19)在ReflectiveInjector _._ getByKeyDefault(HTTP://本地主机:58056/libs/@angular/core/src/di/reflective_injector.js:804:25)在ReflectiveInjector _._ getByKey(HTTP://本地主机:58056/libs/@angular/core/src/di/reflective_injector.js:767:25)在ReflectiveIn 在ElementInjector.get中的jector_.get(http:// localhost:58056/libs/@angular/core/src/di/reflective_injector.js:576:21)(http:// localhost:58056/libs/@ angular/core /src/linker/element_injector.js:23:48)在ElementInjector.get(HTTP://本地主机:58056/libs/@angular/core/src/linker/element_injector.js:23:48)在ReflectiveInjector _._ getByKeyDefault(http:// localhost:58056/libs/@angular/core/src/di/reflective_injector.js:801:24)错误上下文:resolvePromise中的[object Object](http:// localhost:58056/libs/zone.js /dist/zone.js:538:32)在ZoneDelegate.invokeTask的http:// localhost:58056/libs/zone.js/dist/zone.js:574:18 (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)在Zone.runTask(http:// localhost:58056/libs/zone)的ZoneDelegate.invokeTask(http:// localhost:58056/libs/zone.js/dist/zone.js:355:43). js/dist/zone.js:256:48)在drainMicroTaskQueue(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

Answer 1

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

main.ts

import { categoryService } from './categoryService';

品类component.ts

import { categoryService } from './categoryservice';

然后系统js将进行双重导入

这样,angular2将在提供者Map键中找到服务对象的其他实例.

尽管键对象存在于Map对象中.

hasMap的方法将返回false.这就是你收到错误的原因.

另请参阅此页面上有关Map对象中键重要性的更多信息https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Map#Key_equality