Routing in Angular2 - Link "['Name']" löst nicht zu einer Terminalanweisung

Question

Ich versuche, eine einfache App mit Child-Routing arbeiten.

Wenn ich Setup die Routen auf mein Kind Komponente ich die folgende Fehlermeldung:

Link "["ChildItem"]" does not resolve to a terminal instruction 

Wenn ich alle Routen auf der übergeordneten Komponente legen Sie es richtig funktioniert. Wenn ich die Routen zwischen den Kind- und Elternkomponenten teile, erhalte ich den obigen Fehler.

Hier ist es mit allen Routen auf der gleichen Komponente arbeiten:

import {bootstrap} from 'angular2/platform/browser'; 
import {Component, provide} from 'angular2/core'; 
import {COMMON_DIRECTIVES, CORE_DIRECTIVES, FORM_DIRECTIVES, NgFor, NgIf} from 'angular2/common'; 
import {ROUTER_DIRECTIVES, ROUTER_PROVIDERS, RouteConfig, RouterLink, RouterOutlet, Route, LocationStrategy, HashLocationStrategy} from 'angular2/router'; 


@Component({selector: 'subItem1',template: `SubItem1`})export class SubItem1{} 
@Component({selector: 'subItem2',template: `SubItem2`})export class SubItem2{} 
@Component({selector: 'subItem3',template: `SubItem3`})export class SubItem3{} 

@Component({ 
    selector: 'childItem', 
    directives: [COMMON_DIRECTIVES, CORE_DIRECTIVES, ROUTER_DIRECTIVES, RouterLink], 
    template: `<h2>Child Item</h2> 
    <ul> 
    <li><a [routerLink]="['/SubItem1']">SubItem1</a></li> 
    <li><a [routerLink]="['/SubItem2']">SubItem2</a></li> 
    <li><a [routerLink]="['/SubItem3']">SubItem3</a></li> 
    </ul> 
    ` 
}) 
export class ChildItem{} 


@Component({ 
    selector: 'home', 
    directives: [COMMON_DIRECTIVES, CORE_DIRECTIVES, ROUTER_DIRECTIVES, RouterLink], 
    template: `<h2>Home page</h2> 
    <a [routerLink]="['/ChildItem']">Click Me</a>` 
}) 
export class Home{} 


@Component({ 
    selector: 'my-app', 
    template: `<h1>Routing Test</h1> 
    <router-outlet></router-outlet>`, 
    directives: [ROUTER_DIRECTIVES, RouterLink, RouterOutlet] 
}) 
@RouteConfig([ 
     { path: '/', component: Home, as: 'Home' }, 
     { path: '/child', component: ChildItem, as: 'ChildItem' }, 
     { path: '/child/1/', component: SubItem1, as: 'SubItem1' }, 
     { path: '/child/2/', component: SubItem2, as: 'SubItem2' }, 
     { path: '/child/3/', component: SubItem3, as: 'SubItem3' } 
]) 
export class AppComponent {} 

    bootstrap(AppComponent, [ROUTER_PROVIDERS, provide(LocationStrategy, { useClass: HashLocationStrategy })]) 

Hier werden die Routen auf separaten Komponenten ist, wo ich den Fehler, wenn das Kind compoent viewing:

import {bootstrap} from 'angular2/platform/browser'; 
import {Component, provide} from 'angular2/core'; 
import {COMMON_DIRECTIVES, CORE_DIRECTIVES, FORM_DIRECTIVES, NgFor, NgIf} from 'angular2/common'; 
import {ROUTER_DIRECTIVES, ROUTER_PROVIDERS, RouteConfig, RouterLink, RouterOutlet, Route, LocationStrategy, HashLocationStrategy} from 'angular2/router'; 


@Component({selector: 'subItem1',template: `SubItem1`})export class SubItem1{} 
@Component({selector: 'subItem2',template: `SubItem2`})export class SubItem2{} 
@Component({selector: 'subItem3',template: `SubItem3`})export class SubItem3{} 

@Component({ 
    selector: 'childItem', 
    directives: [COMMON_DIRECTIVES, CORE_DIRECTIVES, ROUTER_DIRECTIVES, RouterLink], 
    template: `<h2>Child Item</h2> 
    <ul> 
    <li><a [routerLink]="['/SubItem1']">SubItem1</a></li> 
    <li><a [routerLink]="['/SubItem2']">SubItem2</a></li> 
    <li><a [routerLink]="['/SubItem3']">SubItem3</a></li> 
    </ul> 
    ` 
}) 
@RouteConfig([ 
     { path: '/1', component: SubItem1, as: 'SubItem1' }, 
     { path: '/2/', component: SubItem2, as: 'SubItem2' }, 
     { path: '/3/', component: SubItem3, as: 'SubItem3' } 
]) 
export class ChildItem{} 


@Component({ 
    selector: 'home', 
    directives: [COMMON_DIRECTIVES, CORE_DIRECTIVES, ROUTER_DIRECTIVES, RouterLink], 
    template: `<h2>Home page</h2> 
    <a [routerLink]="['/ChildItem']">Click Me</a>` 
}) 
export class Home{} 


@Component({ 
    selector: 'my-app', 
    template: `<h1>Routing Test</h1> 
    <router-outlet></router-outlet>`, 
    directives: [ROUTER_DIRECTIVES, RouterLink, RouterOutlet] 
}) 
@RouteConfig([ 
     { path: '/', component: Home, as: 'Home' }, 
     { path: '/child/...', component: ChildItem, as: 'ChildItem' } 
]) 
export class AppComponent {} 

bootstrap(AppComponent, [ROUTER_PROVIDERS, provide(LocationStrategy, { useClass: HashLocationStrategy })]) 

Index. html

<html> 
    <head> 
    <title>Child Routing</title> 
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="styles.css"> 
    <script src="../node_modules/angular2/bundles/angular2-polyfills.js"></script> 
    <script src="../node_modules/systemjs/dist/system.src.js"></script> 
    <script src="../node_modules/angular2/bundles/angular2.dev.js"></script> 
    <script src="../node_modules/angular2/bundles/router.dev.js"></script> 
    <script src="../node_modules/rxjs/bundles/rx.js"></script> 
    <script> 
     System.config({ 
     packages: {'app': {defaultExtension: 'js'}}, 
     baseURL: '/src' 
     }); 
     System.import('app/app'); 
    </script> 
    </head> 
    <body> 
    <my-app>Loading...</my-app> 
    </body> 
</html> 

packages.json

{ 
    "name": "angular2-forms", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "tsc": "tsc -p src -w", 
    "start": "live-server --open=src" 
    }, 
    "keywords": [], 
    "author": "John Tindell", 
    "license": "ISC", 
    "dependencies": { 
    "angular2": "2.0.0-beta.0", 
    "es6-module-loader": "0.17.8", 
    "systemjs": "0.19.8", 
    "es6-shim":"0.33.3", 
    "rxjs": "5.0.0-beta.0" 
    }, 
    "devDependencies": { 
    "live-server": "^0.9.0", 
    "typescript": "^1.7.3" 
    } 
} 

Answer 1

Dies kann für andere Benutzer nützlich sein, deshalb schreibe ich es als eine Antwort, der Kommentar kann zu kurz sein.

In Ihrer RouteConfig haben Sie ChildItem als übergeordnete Route definiert. Der /... Teil macht es zu einer übergeordneten Route, was bedeutet, dass es Kinder hat.

@RouteConfig([ 
     // This route is a parent route 
     { path: '/child/...', component: ChildItem, as: 'ChildItem' } 
]) 

So kann man nicht einfach Weg zu ['ChildItem'] ohne ein Kind Route spezifiziert oder ohne useAsDefault: true in der Route hinzufügen.

So haben Sie zwei Möglichkeiten:

• Option 1: In useAsDefault: true in einem Ihrer Kind Routen

@RouteConfig([ 
     { path: '/1', component: SubItem1, as: 'SubItem1', useAsDefault: true}, 
     { path: '/2/', component: SubItem2, as: 'SubItem2' }, 
     { path: '/3/', component: SubItem3, as: 'SubItem3' } 
]) 
export class ChildItem{} 

Mit dieser Option jedes Mal wenn Sie zu ChildItem navigieren es umleiten Sie sofort zu SubItem1. Hinweis: as wurde veraltet Alphas vor, bleiben Sie auf name.

• Option 2: ein Kind in den Link angeben
(Sie können dies auf zwei Arten tun)

// First way 
<a [routerLink]="['/ChildItem', 'SubItem1']">Click Me</a> 

// Second way 
<a [routerLink]="['/ChildItem/SubItem1']">Click Me</a> 

Beide Wege sind ähnlich, aber die erste von Ihnen passieren lassen Parameter zu jeder Route, zum Beispiel:

// ChildItem gets "id" 
// SubItem1 gets "itemName" 
<a [routerLink]="['/ChildItem', {id: 'someId'}, 'SubItem1', {itemName: 'someName'}]">Click Me</a> 

// Only SubItem1 gets "id" 
<a [routerLink]="['/ChildItem/SubItem1', {id: 'someId'}]">Click Me</a> 

Ich hoffe, das war hilfreich und klar.