góc 2: nhiều <Router-ổ cắm> cho các tuyến đường phụ

Question

Với góc 2, là nó cách nào để có đường tiểu không hiển thị vào thẻ chính

<router-outlet></router-outlet> 

Ví dụ:

url : "http://mywebsite.com/" 
MainComponent.ts 
@Component({ 
    ... 
    template:'<router-outlet></router-outlet>' 
    ... 
}) 
@RouteCongif([ 
    {path: '/products', name:'Product', component: Product} 
]) 

Tùy chọn này hiển thị thành phần phụ vào bộ định tuyến < của bộ định tuyến > thẻ

Được rồi, giờ đây bạn có thể có loại cấu hình sau:

url : "http://mywebsite.com/products" 
ProductComponent.ts 
@Component({ 
    template: ` 
     ... 
     <div> My list of products ! </div> 
     ... 
     <a [RouteLink]="['ProductDetails', {slug-product-details:product.slug}]"> 
      {{ product.name }} Details 
     </a> 
     ... 
     <sub-router-outlet></sub-router-outlet> 
    ` 
}) 
@RouteConfig([ 
    {path: '/:slug-product-details', name:'ProductDetails', component: ProductDetailsComponent}, 
]) 

Và

url : "http://mywebsite.com/products/one-product-details" 
ProductDetailsComponent.ts 
@Component({ 
    ... 
    template : ` 
     <div> Details of the product : </div> 
     ... 
    ` 
    ... 
}) 

Tôi muốn giữ lại việc sử dụng các bộ định tuyến với ô tô được thiết kế url và diplay các tuyến đường và các chi tiết template vào loại này < sub-router-ổ cắm > thẻ.

Cảm ơn sự giúp đỡ của bạn.

Answer 1

CẢNH BÁO: Đoạn code dưới đây chỉ hoạt động trên Angular2 Beta

Bạn có thể thực hiện định tuyến phụ. Cấu trúc tệp của bạn phải giống như thế này.

app.ts

@RouteConfig([ 
    ... 
    { path: '/product/...', component: Product, name: 'Product'} 
    { path: '/home', component: Home, name: 'Home'} 
    ... 
]) 
export class App { } 

product.ts

@Component({ 
    selector: 'product', 
    templateUrl: 'app/components/product/product.html', 
    directives: [ROUTER_DIRECTIVES] 
}) 
@RouteConfig([ 
    ... 
    { path: 'product-one', component: ProductOne, name: 'Product-one' },   
    { path: 'product-two', component: ProductTwo, name: 'Product-two', useAsDefault: true }, 
    ... 
]) 
export class Product { 
    constructor(location: Location, public router: Router) {} 

    goToProductOne() { 
     this.router.navigate(['Product','Product-one']) 
    } 
} 

product.html

... 
<a [routerLink]="['./Product-one']"> Product One </a> 
<a [routerLink]="['/Home']"> Home </a> 
... 

đâu [ './Product-one'] Là một subroute và ['/ Home'] là một tuyến đường phụ huynh