Định tuyến trong Angular2 - Liên kết "['Tên']" không giải quyết với lệnh hướng dẫn thiết bị đầu cuối

Question

Tôi đang cố gắng để có được một ứng dụng đơn giản làm việc với định tuyến con.

Khi tôi thiết lập các tuyến đường trên thành phần con của tôi, tôi nhận được thông báo lỗi sau:

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

Nếu tôi đặt tất cả các tuyến đường trên thành phần mẹ nó hoạt động một cách chính xác. Nếu tôi chia các tuyến đường giữa các thành phần con và phụ huynh, tôi nhận được lỗi trên.

Dưới đây là nó làm việc với tất cả các tuyến đường trên cùng một thành phần:

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

Dưới đây là các tuyến đường vào các thành phần riêng biệt, nơi tôi nhận được lỗi khi xem compoent Child:

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

Điều này có thể hữu ích cho người dùng khác, vì vậy tôi viết nó như là một aswer, nhận xét có thể quá ngắn.

Trong số RouteConfig bạn đã xác định ChildItem làm tuyến đường chính. Phần /... làm cho nó trở thành một tuyến đường mẹ, có nghĩa là nó có con.

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

Vì vậy, bạn có thể không chỉ đơn giản là đường đến ['ChildItem'] mà không chỉ định một lộ trình con hay mà không cần thêm useAsDefault: true trong lộ trình.

Vì vậy, bạn có hai lựa chọn:

• Lựa chọn 1: Thêm useAsDefault: true tại một trong những tuyến đường con bạn

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

Với tùy chọn này, mọi bạn điều hướng đến ChildItem nó sẽ chuyển hướng bạn lập tức truy cập SubItem1. Lưu ý: as không được dùng nữa trước đây, dính vào name.

• Lựa chọn 2: Chỉ định một đứa trẻ trong liên kết (bạn có thể làm điều này theo hai cách)

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

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

Cả hai cách đều giống nhau, nhưng một trong những đầu tiên sẽ cho phép bạn để vượt qua thông số cho mỗi tuyến đường, ví dụ:

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

Tôi hy vọng điều này hữu ích và rõ ràng.