angular2 是否支持嵌套状态/路由？答案

【问题标题】：Does angular2 support nested states/routes?angular2 是否支持嵌套状态/路由？
【发布时间】：2016-04-30 22:29:09
【问题描述】：

angular2 是否支持嵌套状态/路由？例如，在一个视图端口中有 2 个链接，单击特定链接时，它将显示一个视图，该视图还有多个链接，但特定于较早的链接。

【问题讨论】：

是的，有可能stackoverflow.com/questions/34363176/…

【解决方案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 {
}

这是文档：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

【讨论】：

【解决方案2】：

随着新版本的路由器，如果要使用嵌套路由，这是一个关于如何定义路径的示例

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

在您的 SearchComponent 模板中，添加 <router-outlet></router-outlet>

【讨论】：

NG2 路由器 API 的弃用速度比我冰箱里的牛奶还快。
在 beta 和 RC 期间是的，并不是说完整版本已经发布，它应该是稳定的。
如果您想要多个孩子，比如导航栏和内容区，该怎么办？
NM 这有帮助...blog.angular-university.io/…
需要在children中定义{ path: ' ' } 默认路由吗？如果是，为什么？