angular2没有NavigationService的提供者！ （MenuComponent - ＆gt; NavigationService）

Question

我正在尝试创建一个角度（beta7）应用。在顶部应该有MenuComponent使用NavigationService导航到我的应用的不同部分。我希望NavigationService是单例，因此我用bootstrap(...)实例化它。我知道您也可以在@Component()中添加提供程序，但据我所知，这意味着这些提供程序不是单例，而是为每个实例创建。

但是我得到以下异常：

  

没有NavigationService的提供商！ （MenuComponent - ＆gt;   的NavigationService）

这是我的代码：

boot.ts

import {bootstrap} from 'angular2/platform/browser'
import {provide} from 'angular2/core'
import {ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy} from 'angular2/router'
import {HubService} from './services/HubService';
import {ConfigService} from './services/ConfigService';
import {App} from './app';
import {NavigationService} from './services/NavigationService';

var bootstrap_application = function () {
    var providers = [
        ROUTER_PROVIDERS,
        NavigationService,
        HubService,
        ConfigService,
        provide(LocationStrategy, { useClass: HashLocationStrategy })];
    bootstrap(App, providers);
};

bootstrap_application();

app.ts

import {Component} from 'angular2/core';
import {ROUTER_DIRECTIVES, RouteConfig} from 'angular2/router'
import {MenuComponent} from './components/menu/menu';
import {HomeComponent} from './components/home/home';
import {RoomComponent} from './components/room/room';

@Component({
    selector: 'hc',
    templateUrl: 'app/app.html',
    directives: [ROUTER_DIRECTIVES, MenuComponent]
})
@RouteConfig([
    { path: "/", name: "Home", component: HomeComponent, useAsDefault: true },
    { path: "/room/:name", name: "Room", component: RoomComponent }
])
export class App {
}

app.html

<hc-menu>Loading menu...</hc-menu>
<div class="container-fluid">
    <router-outlet></router-outlet>
</div>

menu.ts

import {Component} from 'angular2/core';
import {Room, ConfigService} from '../../Services/ConfigService';
import {NavigationService} from '../../Services/NavigationService';

@Component({
    selector: 'hc-menu',
    templateUrl: 'app/components/menu/menu.html'
})
export class MenuComponent {
    Rooms: Room[];
    IsOpen: boolean;

    constructor(private navigationService: NavigationService, private configService: ConfigService) {
        this.Rooms = configService.GetRooms();
        this.IsOpen = false;
    }

    toggleOpen() {
        this.IsOpen = !this.IsOpen;
    }

    navigateTo(room: Room) {
        this.navigationService.navigateToRoom(room);
    }
}

NavigationService.ts

import {Injectable} from 'angular2/core';
import {Router} from 'angular2/router';
import {Room} from './ConfigService'

@Injectable()
export class NavigationService {
    router: Router;

    constructor(router: Router) {
        this.router = router;
    }

    navigateToRoom(room: Room) {
        this.router.navigate(['Room', { name: room.Name }]);
    }
}

Answer 1

在MenuComponent类中，添加提供程序：[NavigationService]作为@Component的属性。

@Component({
    selector: 'hc-menu',
    providers:[NavigationService],
    templateUrl: 'app/components/menu/menu.html'
})