角度2：サブ経路のための複数の<ルータ出口>アンギュラ2で

Question

、それは例えばメインタグ

<router-outlet></router-outlet> 

に表示されない副経路を持っている任意の方法である：

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

これは、ルータの出口に<ルータの出口にサブコンポーネントを表示します>タグ

すべての権利は、今この種類の構成を持つことが可能です：

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

そして

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

私は、自動設計されたURLを持つルータの使用を続けると、ルートをdiplayしたいと詳細は<サブルータ・アウトレット>タグのこの種にテンプレート。

ありがとうございました。

Answer 1

WARNING：コードは以下のみAngular2ベータ版で動作します

あなたは、サブルーティングを実装することができます。あなたのファイル構造はこのように似ているはずです。

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

[ './Product-one']はサブルートと['/ Home']は親ルートです