2016-07-25 53 views
0

該應用與舊的Angular 2路由器工作正常,但是當我切換到「3.0.0-beta.2」時,應用程序無法加載。 這顯然僅僅是應用程序的一部分,但我相信這是問題所在:Angular 2路由器不能正常工作

文件:

app.component.ts

import { Component} from '@angular/core'; 
import {NavComponent} from "./nav.component"; 
import { ROUTER_DIRECTIVES } from '@angular/router'; 

@Component({ 
    selector: 'my-app', 
    template: `<my-nav></my-nav> 
    <router-outlet></router-outlet>`, 
    directives:[NavComponent,ROUTER_DIRECTIVES] 
}) 

export class AppComponent{ 
} 

app.routes.ts

import {AboutComponent} from "./about.component"; 
import {TasksComponent} from "./tasks.component"; 
import {WalleyComponent} from "./walley.component"; 
import {DashboardComponent} from "./dash-board.component"; 
import {PageNotFoundComponent} from "./404.component"; 
import { provideRouter, RouterConfig } from '@angular/router'; 

export const routes: RouterConfig = [ 
    {path: '', component: DashboardComponent}, 
    {path: 'yourTasks', component: TasksComponent}, 
    {path: 'about',component: AboutComponent}, 
    {path: 'walley',component: WalleyComponent}, 
    {path: '**', component: PageNotFoundComponent} 
    ]; 
export const appRouterProviders = [ 
    provideRouter(routes) 
]; 

main.ts

import { bootstrap } from '@angular/platform-browser-dynamic'; 
import {AppComponent} from './app.component'; 
import {TodoStore} from './todoStore.service'; 
import { appRouterProviders } from './app.routes'; 


bootstrap(AppComponent,[appRouterProviders,TodoStore]).catch(err => console.error(err)); 

nav.component.ts

import { Component} from '@angular/core'; 
import {ROUTER_DIRECTIVES} from '@angular/router'; 

@Component({ 
    selector:'my-nav', 
    templateUrl: 'components/nav.component.html', 
    directives:[ROUTER_DIRECTIVES] 
}) 

export class NavComponent{ 
    num: Number; 
} 

在nav.component.html我使用[router-link] ="['/walley']"觸發導航。

任何反饋,無論它的代碼問題,或與我使用的路由器版本將不勝感激。

回答

0

您需要在模板html中使用[routerLink]。請確保您使用小寫字母「R」,大寫字母「L」和沒有連字符:)

而且,它的方便來引導你的路由器的指令,如果你打算使用routerLinks很多應用程序