구성 요소 선택기가 경로 제공자와 함께 작동하지 않습니다.

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

그래서 이런 짓을

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'; 
}