Angular 从入坑到挖坑 - Router 路由使用入门指北 (3)

与使用查询参数不同，使用动态路由进行参数传值时，需要我们在定义路由时就提供参数的占位符信息，例如在下面定义路由的代码里，对于组件所需的参数 newsId，我们需要在定义路由时就指明

const routes: Routes = [ { path: 'news/detail/:newsId', component: NewsDetailComponent }, ];

对于采用动态路由进行的路由跳转，在 a 标签绑定的 routerLink 属性数组的第二个数据中，需要指定我们传递的参数值。例如这里的 item.newsId 变量就是我们需要传递的参数值

<ul> <li *ngFor="let item of newsList; let i = index"> <a [routerLink]="['/news/detail', item.newsId]" routerLinkActive="active" > {{item.title}} </a> </li> </ul>

而采用 js 的方式进行跳转时，我们同样需要使用依赖注入的方式注入 Router 类，然后调用 navigate 方法进行跳转。与使用 query 查询参数传递数据不同，此时需要将跳转的链接与对应的参数值组合成为一个数组参数进行传递

import { Component, OnInit } from '@angular/core'; // 引入路由模块 import { Router, ActivatedRoute } from '@angular/router'; @Component({ selector: 'app-news', templateUrl: './news.component.html', styleUrls: ['./news.component.scss'] }) export class NewsComponent implements OnInit { newsList: any; constructor(private route: ActivatedRoute, private router: Router) { this.newsList = [{ newsId: 1111, title: 'lalalalalallaaa' }, { newsId: 2222, title: 'lalalalalallaaa' }, { newsId: 3333, title: 'lalalalalallaaa' }]; } ngOnInit(): void { this.route.queryParamMap.subscribe((data: any) => { console.log(data.params); }); } routerNavigate() { this.router.navigate(['/news/detail', 11111]); } }

在获取参数数据的组件类中，需要依赖注入 ActivatedRoute 类，因为是采用的动态路由的方式进行的参数传递，这里需要通过 paramMap 属性获取到对应的参数值

import { Component, OnInit } from '@angular/core'; // 引入路由模块 import { ActivatedRoute } from '@angular/router'; @Component({ selector: 'app-news-detail', templateUrl: './news-detail.component.html', styleUrls: ['./news-detail.component.scss'] }) export class NewsDetailComponent implements OnInit { constructor(private route: ActivatedRoute) { } ngOnInit(): void { this.route.paramMap.subscribe((data: any) => { console.log(data.params); }); } }

4.3、嵌套路由

在一些情况下，路由是存在嵌套关系的，例如下面这个页面，只有当我们点击资源这个顶部的菜单后，它才会显示出左侧的这些菜单，也就是说这个页面左侧的菜单的父级菜单是顶部的资源菜单

针对这种具有嵌套关系的路由，在定义路由时，我们需要通过配置 children 属性来指定路由之间的嵌套关系，例如这里我定义 ProductDetailComponent 这个组件和 ProductComponent 组件形成的路由之间具有嵌套关系

// 配置路由信息 const routes: Routes = [ { path: 'product', component: ProductComponent, children: [{ path: 'detail', component: ProductDetailComponent }, { path: '', redirectTo: 'detail', pathMatch: 'full' }] } ];

因为子路由的渲染出口是在父路由的页面上，因此当嵌套路由配置完成之后，在嵌套的父级页面上，我们需要定义一个 <router-outlet> 标签用来指定子路由的渲染出口，最终的效果如下图所示

<h3>我是父路由页面显示的内容</h3> <p>product works!</p> <!-- 加载子路由的数据 --> <h3>子路由组件渲染的出口</h3> <router-outlet></router-outlet>