爲什麼路由不起作用？

Question

我試圖通過新的路由在angular2

做嚮導，我app.ts

import {Component,ViewEncapsulation} from 'angular2/core'; 
import {RouteConfig,ROUTER_DIRECTIVES} from 'angular2/router'; 
import {WizardCmp} from './wizard'; 
@Component({ 
    selector: 'my-app', 
    providers: [], 
    encapsulation: ViewEncapsulation.None, 
    template: ` 
    <p>header</p> 
    <router-outlet></router-outlet> 
    `, 
    directives: [ROUTER_DIRECTIVES] 
    }) 
    @RouteConfig([ 
    { path: '/...', component:WizardCmp, as: 'Home',useAsDefault:true}, 
     ]) 
     export class App {} 

我只有一個有三個點符號在這裏的路線。

wizard.ts

import {Component, View} from 'angular2/core'; 
import {Router,RouteConfig,ROUTER_DIRECTIVES} from 'angular2/router'; 
import {FirstFormCmp} from './form1'; 
import {SecondFormCmp} from './form2'; 
import {ThirdFormCmp} from './form3'; 
@Component({ 
    selector: 'wizard' 
     }) 
@View({ 

    template: ` 
    <h1>wizard</h1> 
    <router-outlet></router-outlet> 
     `, 
    directives: [...ROUTER_DIRECTIVES] 
    }) 
    @RouteConfig([ 
    {path: 'first', name: 'FirstForm', component: FirstFormCmp, useAsDefault: true}, 
    {path: 'second', name: 'SecondForm', component: SecondFormCmp}, 
    {path: 'third', name: 'ThirdForm', component: ThirdFormCmp}, 


export class WizardCmp {} 

，但它並不顯示任何內容。在控制檯中沒有錯誤。 這是Plunker

Answer 1

它正在與小的修改http://plnkr.co/edit/bppL6TZDbRBD3mVIjw3f?p=preview ...

隨着plunker你必須使用HashLocationStrategy。也許是因爲應用程序在中運行，不知道原因。但是這不是Angular2或者Router問題，而是限制了笨蛋。

我只是說HashLocationStrategy自舉：

bootstrap(App, [ 
    ROUTER_PROVIDERS, 
    provide(APP_BASE_HREF, {useValue : '/'}), 
    provide(LocationStrategy, {useClass: HashLocationStrategy}) 
]) 

鏈接到模板：

<a [routerLink]="['/Wizard', 'FirstForm']">first</a> 
<a [routerLink]="['/Wizard', 'SecondForm']">second</a> 
<a [routerLink]="['/Wizard', 'ThirdForm']">third</a> 

你的代碼的其餘部分保持不變，和它的作品...