angular - 没有 serviceName 的提供者！（组件名称 -> 服务名称）

Question

我正在开发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' }
        ]);
    }
}

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

请更正我在这里遗漏的内容。

Answer 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] 将使用参数的类型注释。

Answer 2

检查您是否使用GlobalDataServiceinLoginService或HttpService. 在这种情况下，试着把它放在LoginService前面HttpService