2016-07-25 95 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很多应用程序