定义子路由

当某些路由只能在其他路由中访问和查看时，可能适合将其创建为子路由。

例如：产品详细信息页面可能有一个标签式导航部分，默认显示产品概述。 当用户单击“技术规格”选项卡时，该部分将显示规格。

如果用户点击ID为3的产品，我们要显示产品详细信息页面，其中包含概述：

localhost:3000/product-details/3/overview

当用户点击 “Technical Specs”:

localhost:3000/product-details/3/specs

overview 和 specs 作为 product-details/:id的子路由。 它们只能在产品详细信息中找到。

我们的子 Routes 看起来像这样：

export const routes: Routes = [
  { path: '', redirectTo: 'product-list', pathMatch: 'full' },
  { path: 'product-list', component: ProductList },
  { path: 'product-details/:id', component: ProductDetails,
    children: [
      { path: '', redirectTo: 'overview', pathMatch: 'full' },
      { path: 'overview', component: Overview },
      { path: 'specs', component: Specs }
    ]
  }
];

这些子路由的组件将显示在哪里？ 就像我们对于根应用程序组件有一个<router-outlet> </ router-outlet>，我们在ProductDetails组件中有一个路由出口。 对应于product-details的子路由的组件将被放置在ProductDetails中的路由出口。

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
  selector: 'product-details',
  template: `
    <p>Product Details: {{id}}</p>
    <!-- Product information -->
    <nav>
      <a [routerLink]="['overview']">Overview</a>
      <a [routerLink]="['specs']">Technical Specs</a>
    </nav>
    <router-outlet></router-outlet>
    <!-- Overview & Specs components get added here by the router -->
  `
})
export default class ProductDetails implements OnInit, OnDestroy {
  id: number;
  constructor(private route: ActivatedRoute) {}
  ngOnInit() {
    this.sub = this.route.params.subscribe(params => {
       this.id = +params['id']; // (+) converts string 'id' to a number
    });
  }
  ngOnDestroy() {
    this.sub.unsubscribe();
  }
}

或者，我们可以将overview路由URL简单地指定为：

localhost:3000/product-details/

export const routes: Routes = [
  { path: '', redirectTo: 'product-list', pathMatch: 'full' },
  { path: 'product-list', component: ProductList },
  { path: 'product-details/:id', component: ProductDetails,
    children: [
      { path: '', component: Overview },
      { path: 'specs', component: Specs }
    ]
  }
];

由于product-details 的Overview子路由具有空路径，因此默认情况下将加载它。specs子路由保持不变。

View Example with child routes

View Example with route params & child routes

查看以全屏模式运行的示例，以查看URL变化。

访问父路由的参数

在上述示例中，假设product-details 的子路由需要产品的ID以获取规范或概述信息。子路由组件可以访问父路由的参数，如下所示：

export default class Overview {
  parentRouteId: number;
  private sub: any;
  constructor(private router: Router,
    private route: ActivatedRoute) {}
  ngOnInit() {
    // Get parent ActivatedRoute of this route.
    this.sub = this.router.routerState.parent(this.route)
      .params.subscribe(params => {
        this.parentRouteId = +params["id"];
      });
  }
  ngOnDestroy() {
    this.sub.unsubscribe();
  }
}

View Example child routes accessing parent’s route parameters

查看以全屏模式运行的示例，以查看URL变化。

链接

路由可以使用/，或../;这告诉Angular 2在路由树链接到哪里。

例如：

<a [routerLink]="['route-one']">Route One</a>
<a [routerLink]="['../route-two']">Route Two</a>
<a [routerLink]="['/route-three']">Route Three</a>

在上面的例子中，路由一链接到当前路由的子节点。 路由二链接到当前路由的兄弟。 路由三链接到根组件的子节点（如果当前路由是根组件，则与路由一等效）。

View Example with linking throughout route tree

查看以全屏模式运行的示例，以查看URL变化。