angular2はネストされた状態/ルートをサポートしていますか？

Question

angular2はネストされた状態/ルートをサポートしていますか？ たとえば、ビューポートに2つのリンクがあり、特定のリンクをクリックすると、さらに複数のリンクがあり、以前のリンクに固有のビューが表示されます。

Answer 1

はい。

私はいくつかのデモを行った。ここで http://plnkr.co/edit/IcnEzZ0WtiaY5Bpqrq2Y?p=preview

import {Component, View, Input} from 'angular2/core'; 
import { 
    RouteConfig, Router, RouteParams, ROUTER_DIRECTIVES 
} from 'angular2/router'; 
import {PersistentRouterOutlet} from './persistent-router-outlet'; 


@Component({}) 
@View({ 
    template: 'product info here' 
}) 
class ProductInfo { 
} 

@Component({}) 
@View({ 
    template: 'buy here' 
}) 
class ProductBuy { 
} 


@Component({}) 
@View({ 
    directives: [...ROUTER_DIRECTIVES, PersistentRouterOutlet], 
    template: ` 
    <div> 
     <h2>Product {{pid}}</h2> 
     <a [routerLink]="['Info']">Show Info</a> 
     <a [routerLink]="['Buy']">Go Buy</a> 
     <div> 
     <router-outlet></router-outlet> 
     </div> 
    </div> 
    ` 
}) 
@RouteConfig([ 
    {path: '/info', name: 'Info', component: ProductInfo, useAsDefault: true} 
    {path: '/buy', name: 'Buy', component: ProductBuy} 
]) 
class Product { 
    pid 
    constructor(params: RouteParams) { 
    this.pid = params.get('pid') 
    } 
} 

@Component({}) 
@View({ 
    directives: [...ROUTER_DIRECTIVES], 
    template: ` 
    info about the store 
    ` 
}) 
class StoreInfo { 
} 


@Component({ 
    selector: 'my-app', 
    providers: [], 
    directives: [...ROUTER_DIRECTIVES, PersistentRouterOutlet] , 
    template: ` 
    <div> 
     <a [routerLink]="['./StoreInfo']">See Store Info</a> 
     <a [routerLink]="['./Product', {pid:1}]">See Product 1</a> 
     <a [routerLink]="['./Product', {pid:2}]">See Product 2</a> 
     <div> 
     <persistent-router-outlet></persistent-router-outlet> 
     </div> 
    </div> 
    ` 
}) 
@RouteConfig([ 
    {path: '/', name: 'StoreInfo', component: StoreInfo, useAsDefault: true} 
    {path: '/product/:pid/...', name: 'Product', component: Product} 
]) 
export class App { 
} 

はDOCです：https://angular.io/docs/ts/latest/guide/router.html#!#child-router

注永続タブに問題があります：ルータの新バージョンでAngular2 Routing: persisting route tabs and child routes https://github.com/angular/angular/issues/6634

Answer 2

は、ネストされたルートを使用する場合は、ここに のパスを定義する方法の例があります

{ 
    path: 'search', 
    component: SearchComponent, 
    children: [ 
     { path: 'results/:id', component: ResultsComponent }, 
    ] 
} 

とあなたのSearchComponentテンプレートで、はい、それは可能である<router-outlet></router-outlet>