没有serviceName的提供者! (componentName - > ServiceName)

时间:2016-01-12 09:56:28

标签: angular angular2-directives angular2-services

我正在研究 angular2 应用。我已经编写了一个服务来保存可以在任何组件上通过应用程序获得的数据并进行更新。

这是我的 GlobalDataService .ts

import {Component, View, Inject} from 'angular2/core';
export class GlobalDataService {
    devIsLogin: boolean;
    dev: {};
    constructor(){
        this.devIsLogin=false;
    }
}

这是我的bootstrap.ts

//import {bootstrap} from 'angular2/angular2';
///<reference path="../node_modules/angular2/typings/node/node.d.ts" />
import {UpgradeAdapter} from 'angular2/upgrade';
import {bootstrap} from 'angular2/platform/browser';
import {ROUTER_PROVIDERS} from 'angular2/router';
import {HTTP_PROVIDERS} from 'angular2/http';


import {AppComponent} from './components/app/app';
import {LoginService} from './services/loginService';
import {HttpService} from './services/httpServices';
import {GlobalDataService} from './services/GlobalDataService';

bootstrap(AppComponent, [HTTP_PROVIDERS, ROUTER_PROVIDERS, LoginService, HttpService, GlobalDataService]);

我已注入 GlobalDataService appComponent。在整个应用程序中使用单个实例。

这是我的appcomponent,它试图访问globalDataService

import {Component, View, Inject} from 'angular2/core';
import {NgIf} from 'angular2/common';
import {Router, RouteConfig, RouterLink, RouterOutlet, ROUTER_PROVIDERS} from 'angular2/router';


import {HomeComponent} from '../home/home';
import {LoginComponent} from '../login/login';
import {GlobalDataService} from '../../services/globalDataService';


@Component({
    selector: 'app',
})
@View({
    templateUrl: '/scripts/src/components/app/app.html',
    directives: [RouterLink, RouterOutlet, NgIf]
})
export class AppComponent {
    devIsLogin: boolean;
    Dev: {};
    constructor(
        @Inject(Router) router: Router,
        @Inject(GlobalDataService) globalDataService: GlobalDataService
    ) {
        this.devIsLogin = false;
        globalDataService.devIsLogin=false;
        router.config([
            { path: '', component: HomeComponent, as: 'Home' },
            { path: '/login', component: LoginComponent, as: 'Login' }
        ]);
    }
}

但是当我运行我的应用程序时,它会给我错误

enter image description here

请纠正我在这里失踪的内容。

2 个答案:

答案 0 :(得分:1)

服务类

中缺少@Injectable()注释
@Injectable() // <== missing
export class GlobalDataService {
    devIsLogin: boolean;
    dev: {};
    constructor(){
        this.devIsLogin=false;
    }
}

另见https://angular.io/docs/ts/latest/guide/dependency-injection.html

我也会删除@Inject(GlobalDataService)

  
      
  • @Inject()不存在时,[Injector]将使用参数的类型注释。
  •   

答案 1 :(得分:0)

检查您是否在GlobalDataServiceLoginService中使用HttpService。在这种情况下,请尝试将其放在LoginServiceHttpService

之前