question routeur lien Angular2 lors de l'injection d'un composant modèle avec routeur relie

Question

question routeur lien Angular2 lors de l'injection d'un composant modèle avec routeur liens

J'ai un fichier app.ts et je veux à la dépendance injecter ma navigation composant dans mon fichier app.ts.

J'ai fait un composant de navigation qui a un modèle et aucune fonctionnalité. Le modèle injecte bien dans app.ts. Toutefois, lorsque j'ajoute les liens d'itinéraire au modèle, j'obtiens toujours des erreurs de console lors de l'utilisation de liens de routage uniquement.

Voici mon fichier ts composant de navigation:

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

@Component({ 
    selector: 'HeaderNavigation' 
}) 

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

export class HeaderNavigation{ 

} 

Voici mon composant de navigation fichier 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> 

Ceci est mon fichier app.ts: Ce fichier injectent l'élément de navigation ci-dessus:

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]); 

Ceci est le message d'erreur que je reçois de la console:

Answer 1

Je résolu ma question! manquait dans le composant html de navigation et puis j'ai eu le nom de lien de routeur faux et l'ai changé à "Login" de "login" pour le faire correspondre dans la configuration de routeur dans le fichier app.ts.

J'ai fait ces changements dans le code ci-dessus pour quiconque en a besoin.

Answer 2

Pour ceux qui utilisent 2 RC4 angulaire, voici ce que j'utilise: 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{ 
} 

Pour ajouter en-tête dans un autre composant: 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 { 
}