コンポーネントのセレクタがルートプロバイダと連携していません

Question

したがって、angular.io（https://angular.io/docs/ts/latest/tutorial/）のチュートリアルに従いました。私は今ルーティングを設定して、私のAppComponentは "app"のセレクタを持っています。それはうまく動作します。私のapp.htmlには<router-outlet></router-outlet>というタグがあります。それはまた、私は別のルートに移動するようにコンテンツを置き換える、うまく動作します。

しかし、自分のナビゲーションバーの設定を開始したため、APIから読み込んでいるデータに基づいてバーを変更できるようにする必要があります。そこでNavigationComponentという別のコンポーネントを作成しました。私はセレクタを 'navigation-bar'に設定し、タグ<navigation-bar></navigation-bar>をapp.htmlファイルに追加しました。しかし、コンポーネントはロードされません。

私は間違っていますか？各ファイルは以下の通りです。ありがとう！

app.component.ts

imports ... 

@Component({ 
    selector: 'app', 
    templateUrl: 'app/views/app.html', 
    styleUrls: ['app/styles/app.css'], 
    directives: [ROUTER_DIRECTIVES], 
    providers: [ 
     ROUTER_PROVIDERS, 
     AccountService 
    ] 
}) 
@RouteConfig([ 
    ... 
]) 
export class AppComponent { 
    title = 'Tour of Heroes'; 
} 

navigation.component.ts

import { Component, OnInit } from '@angular/core'; 
import { Router } from '@angular/router-deprecated'; 
import {AccountService} from "../services/account"; 

@Component({ 
    selector: 'navigation-bar', 
    templateUrl: 'app/views/navigation.html', 
    styleUrls: ['app/styles/navigation.css'] 
}) 
export class NavigationComponent implements OnInit { 
    isAuthenticated = false; 

    constructor(private accountService: AccountService, private router: Router) { 

    } 

    ngOnInit() { 
     this.isAuthenticated = this.accountService.checkAuthenticated(); 
    } 

    logout() { 
     this.accountService.clearCredentials(); 
     this.router.navigate(["Login"]); 
    } 
} 

app.html

<navigation-bar></navigation-bar> 

<router-outlet></router-outlet> 

参考になる何かがある場合は、私を聞かせて知っている。

Answer 1

だから私はこれをしなかったし、問題の一部を修正するようだが、 `routerLink`はまだで動作しない属性directivesリスト（AppComponentさんComponentデコレータ内部）

imports {NavigationComponent} from .. 

@Component({ 
    selector: 'app', 
    templateUrl: 'app/views/app.html', 
    styleUrls: ['app/styles/app.css'], 
    directives: [ROUTER_DIRECTIVES,NavigationComponent], 
    providers: [ 
     ROUTER_PROVIDERS, 
     AccountService 
    ] 
}) 
@RouteConfig([ 
    ... 
]) 
export class AppComponent { 
    title = 'Tour of Heroes'; 
}