Angular2 маршрутизатора ссылка вопрос при введении компонента шаблона с помощью маршрутизатора связывает

Question

Angular2 вопрос маршрутизатора линию связи при закачке шаблона компонент с маршрутизатором связывает

У меня есть app.ts файл, и я хочу, чтобы придать зависимости моей навигации компонент в файл app.ts.

Я создал компонент навигации, в котором есть шаблон и нет функциональности. Шаблон вводит штраф в app.ts. Однако, когда я добавляю ссылки маршрута к шаблону, я всегда получаю консольные ошибки при использовании только ссылок на маршрутизатор.

Вот моя навигация компонента TS файл:

import {Component, View, CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/angular2'; 

@Component({ 
    selector: 'HeaderNavigation' 
}) 

@View({ 
    templateUrl: '/src/app/components/header/header.html' 
}) 

export class HeaderNavigation{ 

} 

Вот мой навигационный компонент HTML файл:

<header> 
    <nav class="navbar navbar-default"> 
     <ul class="nav navbar-nav navbar-right"> 
      <li class="active"><a [router-link]="['./Login']">Log In</a></li> 
     </ul> 
    </nav> 

    <router-outlet></router-outlet>  
</header> 

Это мой файл app.ts: Этот файл впрыскивает навигационный компонент выше:

import {Component, View, bootstrap, bind, provide} from 'angular2/angular2'; 
import {Router, ROUTER_BINDINGS, RouterOutlet, RouteConfig, RouterLink, ROUTER_PROVIDERS, APP_BASE_HREF} from 'angular2/router'; 
import {Injectable} from 'angular2/angular2'; 
import {HTTP_PROVIDERS, Http, Headers} from 'angular2/http'; 

import {Login} from './components/login/login'; 
import {HeaderNavigation} from './components/header/header'; 

@Component({ 
    selector: 'app' 
}) 

@View({ 
    template: ` 
     <HeaderNavigation></HeaderNavigation> 

     <div class="content"> 
      <router-outlet></router-outlet>  
     </div> 
    `, 
    directives: [RouterOutlet, RouterLink] 
}) 

@RouteConfig([ 
    { path: '/', redirectTo: '/login' }, 
    { path: '/login', component: Login, as: 'Login' } 
]) 

@Injectable() 

export class AppComponent { 
    constructor(){} 
} 

bootstrap(AppComponent, [ROUTER_PROVIDERS, provide(APP_BASE_HREF, {useValue: '/'}), HTTP_PROVIDERS]); 

Это сообщение об ошибке я получаю от моей консоли:

Answer 1

Я решил свой вопрос! отсутствовал в компоненте html навигации, а затем я неправильно назвал имя маршрутизатора и изменил его на «Login» из «login», чтобы соответствовать ему в конфигурации маршрутизатора в файле app.ts.

Я внес эти изменения в приведенный выше код для тех, кто в нем нуждается.

Answer 2

Для тех, кто использует угловой 2 RC4, вот что я использую: header.component.ts

import { Component } from '@angular/core'; 
import { ROUTER_DIRECTIVES } from '@angular/router'; 
@Component({ 
    moduleId: module.id, 
    selector: 'ui-header', 
    templateUrl: 'header.component.html', 
    styleUrls: ['header.component.css'], 
    directives: [ROUTER_DIRECTIVES], 
}) 

export class HeaderComponent{ 
} 

Чтобы добавить заголовок в другом компоненте: other.component.ts

import { Component }   from '@angular/core'; 
import { Router }    from '@angular/router'; 
import { ROUTER_DIRECTIVES } from '@angular/router'; 
import { HeaderComponent }  from'../shared/header/header.component'; 

@Component({ 
    selector: 'ui-other', 
    template: ` 
    <ui-header></ui-header> 
    <div class = "container"> 
     <router-outlet></router-outlet> 
    </div> 
    `, 
    directives: [ROUTER_DIRECTIVES, HeaderComponent] 
}) 

export class OtherComponent { 
}