Angular2 Beta Child Router Fehler: Link "[" NAME "]" löst nicht zu einem Terminalbefehl

Question

Ich habe eine Test App erstellt, um mit Angular2 Beta zu spielen. Ich versuche, von der Elternroute zum Kind zu gelangen.

Jedes Mal, wenn ich versuche, einen untergeordneten Link zu den Einstellungen hinzuzufügen, wird der Fehler "EXCEPTION: Link" ["/ Settings"] "nicht in einen Terminalbefehl aufgelöst. In [['/ Settings'] in AppComponent @ 8:10] "

Die übergeordneten Routen funktionieren gut. Wenn es um die untergeordneten Routen geht, hat es Fehler. Hier ist was ich bisher habe.

app.component.ts

import {Component} from 'angular2/core'; 
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from 'angular2/router'; 
import {appsComponent} from './apps.component'; 
import {HomeComponent} from './Home.Component'; 
import {GPSComponent} from './GPS.component'; 
import {SettingsComponent} from './Settings.component'; 

@Component({ 
selector: 'my-app', 
directives: [ROUTER_DIRECTIVES], 
template: ` 
<div class="container"> 
<div class="row"> 
<div class="col-md-12"> 
    <ul class="nav nav-pills"> 
     <li><a [routerLink]="['/Home']">Home</a></li> 
     <li><a [routerLink]="['/Apps']">Apps</a></li> 
     <li><a [routerLink]="['/GPS']">GPS</a></li> 
     <li><a [routerLink]="['/Settings']">Settings</a></li> 
    </ul> 
</div> 
</div> 
</div> 
<router-outlet></router-outlet> 

` 
}) 

@RouteConfig([ 
    { path: '/', component: HomeComponent, as: 'Home' }, 
    { path: '/apps', component: appsComponent, as: 'Apps'}, 
    { path: '/gps', component: GPSComponent, as: 'GPS' }, 
    { path: '/settings/...', component: SettingsComponent, as:'Settings' } 
]) 
export class AppComponent {} 

Settings.component.ts

import {Component} from 'angular2/core'; 
import {Router} from 'angular2/router'; 
import {UIComponent} from './UI.component'; 
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, RouterOutlet} from 'angular2/router'; 

@Component({ 
    selector: 'settings', 
    directives: [ROUTER_DIRECTIVES], 
    template: `<h1>Settings Page</h1> 
    <ul class="nav nav-stacked"> 
     <li><a [routerLink]="['/settings','/UI']">Desktop UI</a></li> 
     </ul> 
    <router-outlet></router-outlet> 
` 
}) 

@RouteConfig([ 
    { path: '/ui', component: UIComponent, as: 'UI'} 
]) 
export class SettingsComponent {} 

main.ts

import {bootstrap} from 'angular2/platform/browser'; 
import {AppComponent} from './app.component'; 
import {SettingsComponent} from './Settings.component'; 
import {ROUTER_PROVIDERS} from 'angular2/router'; 
import {provide} from 'angular2/core'; 
import {APP_BASE_HREF} from 'angular2/router'; 
import {LocationStrategy, Location, HashLocationStrategy } from 'angular2/router'; 

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

Answer 1

Sie haben path: '/settings/...' Routenweg erklärt für SettingsComponent, drei Punkte das Ende macht diese Route nicht terminal. Das bedeutet, dass Sie nicht zu /settings navigieren können. Sie müssen einen untergeordneten Pfad angeben: /settings/info.