子ルーティングAngular2がuseAsDefault：trueなしで動作しない

Question

私の下のangular2ルーティングプログラムでは、useAsDefault：trueを削除して以下のエラーが表示された場合、ルーティングは機能しません。

例外：リンク "[" Pen "]"は端末命令に解決されません。 [4 @ AppComponentで[ 'ペン']：19]で

**This is Child routing Code:**

import {Component} from 'angular2/core'; 
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router'; 
import {RouteParams} from "angular2/router"; 
import {Pen1Component} from "./pen/app.component.pen1"; 
import {Pen2Component} from "./pen/app.component.pen2"; 


@Component({ 
    templateUrl:'dev/products/app.component.pen.html' 
    template: ` 
      <nav> 
       <ul> 
       <li> 
       <a [routerLink]="['Pen1']">Pen1</a></li> 

       <li> 
       <a [routerLink]="['Pen2']">Pen2</a></li> 
       </ul> 

      </nav> 
     <router-outlet></router-outlet> 
    `, 
    directives: [ROUTER_DIRECTIVES], 
    }) 
@RouteConfig([ 
    {path: '/', name: 'Pen1', component: Pen1Component}, 
    {path: '/pen2', name: 'Pen2', component: Pen2Component} 

export class PenComponent { 
} 

これは、親ルーティングコードです：、

import {Component} from 'angular2/core'; 
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from 'angular2/router'; 
import {PenComponent} from './products/app.component.pen'; 
import {BookComponent} from './products/app.component.book'; 


@Component({ 
    selector: 'my-app', 
    template: ` 
      <nav> 
       <ul> 
       <li> 
       <a [routerLink]="['Pen']">Pen</a></li> 

       <li> 
       <a [routerLink]="['Book',{id:1}]">Book</a></li> 
       </ul> 

      </nav> 
     <router-outlet></router-outlet> 
    `, 
    directives: [ROUTER_DIRECTIVES], 
    providers:[ROUTER_PROVIDERS] 

}) 

@RouteConfig([ 
    {path: '/pen/...', name: 'Pen', component: PenComponent}, 
    {path: '/book/:id', name: 'Book', component: BookComponent} 


]) 


export class AppComponent { 

} 

しかし、このコードを追加する場合そのうまく動作します。

@RouteConfig([ 
    {path: '/', name: 'Pen1', component: Pen1Component, useAsDefault: true}, 
    {path: '/pen2', name: 'Pen2', component: Pen2Component} 

Answer 1

このコードをapp.component.tsで試してください。

import {Component} from 'angular2/core'; 
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from 'angular2/router'; 
import {PenComponent} from './products/app.component.pen'; 
import {BookComponent} from './products/app.component.book'; 


@Component({ 
    selector: 'my-app', 
    template: ` 
      <nav> 
       <ul> 
       <li> 
       <a [routerLink]="['Penn']">Pen</a></li> 

       <li> 
       <a [routerLink]="['Book',{id:1}]">Book</a></li> 
       </ul> 

      </nav> 
     <router-outlet></router-outlet> 
    `, 
    directives: [ROUTER_DIRECTIVES], 
    providers:[ROUTER_PROVIDERS] 

}) 

@RouteConfig([ 
    {path: '/penn/', name: 'Penn', component: PenComponent}, 
    {path: '/book/:id', name: 'Book', component: BookComponent} 

]) 


export class AppComponent { 

} 

私はPennでPenを交換してください。

Angular2はuseAsDefault: trueなしで実行できます。これは エラーを返さないでしょう、この場合は出力はありません。