路由 - 定义子路由

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

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

当用户点击 “Technical Specs”:

localhost:3000/product-details/3/specs

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

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

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

localhost:3000/product-details/

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

View Example with child routes

View Example with route params & child routes

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

View Example child routes accessing parent’s route parameters

链接

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

例如：

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