为什么路由不起作用？

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> 

你的代码的其余部分保持不变，和它的作品...