Sử dụng RouterLink từ một thành phần lồng nhau

Question

Sử dụng góc 2 beta.0

Tôi có một cấu trúc thành phần như vậy

App (Has RouteConfig) 
-> List 
| -> ListItem (Want to use RouterLink from here) 

Điều này dẫn đến một lỗi: Component "List" has no route config.

Vì vậy, tôi đặt một RouteConfig trên thành phần List như vậy ...

@RouteConfig([ 
    {path: '/:id', name: 'Details', component: Detail} 
]) 

Nhưng tôi gặp lỗi trong góc như Error: Child routes are not allowed for "/list". Use "..." on the parent's route path.

Tôi đã thử thêm 3 dấu chấm này trước và sau đường dẫn/danh sách trong cấu hình tuyến đường đó ... không thành công.

Các tài liệu trên router là rất nhẹ và mặc dù tôi biết điều này là vụ phải được dựa tắt của ui-router, tôi không nhìn thấy song song để thêm các tuyến đường lồng nhau

Answer 1

Bạn có thể sử dụng nó như thế này, trong thành phần cha mẹ:

@RouteConfig([ 
    {path: '/', component: HomeComponent, as: 'Home'}, 
    {path: '/list/...', component: ListComponent, as: 'List'} 
]) 

Và sau đó trong ListComponent của bạn, xác định con đường của bạn:

@RouteConfig([ 
    { path: '/:id', component: ListItem, as: 'ListItem' } 
]) 

Hãy chắc chắn rằng ListComponent có <router-outlet></router-outlet> cũng ..

Answer 2

Nếu những gì bạn đang cố gắng làm là sử dụng routerLink từ một thành phần con để thực sự đi đến một trong những tuyến đường được cấu hình của cha mẹ của bạn, sau đó bạn không cần phải đặt bất kỳ RouterConfig trên đứa trẻ, bạn chỉ cần đảm bảo rằng tuyến đường được định cấu hình chính xác trong bố mẹ của bạn và sau đó thêm hằng số ROUTER_DIRECTIVES vào tài sản chỉ thị của con bạn bên trong trang trí của trẻ.

Nó sẽ là một cái gì đó như thế này:

phụ huynh:

import { ROUTER_PROVIDERS, RouteConfig, ROUTER_DIRECTIVES } from 'angular2/router'; 
     : 
    (some more imports) 
     : 
@Component({ 
     : 
    directives: [ROUTER_DIRECTIVES], 
    providers: [ROUTER_PROVIDERS], 
     : 
}) 

@RouteConfig([ 
    {path: '/:id', name: 'Details', component: Detail} 
]) 

Child:

import { ROUTER_DIRECTIVES } from 'angular2/router'; 
    : 
    : 
@Component({ 
    : 
    directives: [ROUTER_DIRECTIVES], 
    : 
}) 

Ngoài ra, đừng quên để cấu hình bạn routerLink một cách chính xác bằng cách cung cấp tuyến đường bạn muốn gửi e dùng làm tham số đầu tiên của mảng và sau đó thêm các thông số bạn muốn gửi đến con đường mục tiêu bằng cách sử dụng cùng tên bạn đã cho chúng trong RouteConfig, như thế này:

<a [routerLink]="['Details', { id: product.productId }]"> Details link </a>