Angular2でのルーティング - ["Name ']"は端末命令に解決されません

Question

私は子ルーティングを扱う簡単なアプリケーションを手に入れようとしています。私はそれが正常に動作する親コンポーネント上のすべてのルートを置くと

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

：

私の子コンポーネントのIセットアップのルートは、私は、次のエラーメッセージが表示されます

。子と親コンポーネントの間でルートを分割すると、上記のエラーが発生します。ここで

は、同じコンポーネント上のすべてのルートでの作業です：

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 })]) 

インデックス：ここ

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 })]) 

は子供Compoentを見ているとき、私はエラーを取得する別のコンポーネントのルートです。 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

これは他のユーザーにとって便利なことがあるので、私はaswerとして書いていますが、コメントが短すぎる可能性があります。

RouteConfigでは、ChildItemを親ルートと定義しました。 /...部分は親ルートになります。つまり、子ルートを持ちます。

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

子ルートを指定せずに、またはルートにuseAsDefault: trueを追加せずに['ChildItem']にあなたがすることができません単にルート。 1

• オプション：

  は、だから、2つのオプションがあり、それリダイレクトします、このオプションで

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

あなたの子供のルートの1つにあなたがChildItemに移動毎回useAsDefault: trueを追加しますあなたはすぐにSubItem1になります。 注：：asは前に廃止されましたが、nameに固執してください。

• オプション2：リンク内の子を指定し

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

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

どちらの方法が似ていますが、最初のものは、あなたが渡すことができるようになる（次の2つの方法でこれを行うことができます）各ルートへのパラメータは次のとおりです。

// 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> 

これは参考になると思います。