Angular 12 中在app-component获取动态路由参数并添加到所有路由的问询

问题成因 #

AppComponent 对应 Angular 路由树的最顶层根节点，你定义的:type参数属于根路由下的第一层子路由配置，根组件默认绑定的ActivatedRoute仅包含根路由的参数，因此直接读取会返回 null。

解决方案 #

1. 正确获取type参数

推荐监听路由导航事件，确保路由加载完成后读取参数，适配首次加载和后续路由变化场景：

// app.component.ts
import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd, ParamMap } from '@angular/router';
import { filter } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  public currentType: string;

  constructor(private router: Router) {}

  ngOnInit(): void {
    // 监听导航完成事件，避免路由未加载时读不到参数
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe(() => {
      // 遍历路由快照树获取type参数
      let snapshot = this.router.routerState.root.snapshot;
      while (snapshot.firstChild) {
        snapshot = snapshot.firstChild;
        if (snapshot.paramMap.has('type')) {
          this.currentType = snapshot.paramMap.get('type');
          break;
        }
      }
      console.log('获取到的type值：', this.currentType);
    });
  }
}

2. 自动给所有路由添加type参数

无需手动拼接参数，两种实现方案可选：

方案一：使用相对路由跳转（推荐，代码改动最小）

所有路由跳转时使用相对路径，Angular会自动继承父路由的:type参数：

• 模板中使用routerLink跳转，不要以斜杠开头：

<!-- 自动生成 /car/details/123 格式的URL -->
<a [routerLink]="['details', '123']">跳转详情页</a>

• 代码中跳转时指定relativeTo参数：

import { Router, ActivatedRoute } from '@angular/router';

constructor(private router: Router, private activatedRoute: ActivatedRoute) {}

goToDetail(uid: string) {
  this.router.navigate(['details', uid], { relativeTo: this.activatedRoute });
}

方案二：配置全局参数继承+封装导航服务

如果需要在全局任意位置（包括根组件）直接跳转，先在路由配置中开启参数继承：

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  // 你原有的路由配置保持不变
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    // 开启全局参数继承，所有子路由可直接拿到父路由参数
    paramsInheritanceStrategy: 'always'
  })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

再封装通用导航服务，避免每次手动传参数：

// type-nav.service.ts
import { Injectable } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class TypeNavService {
  private currentType: string;

  constructor(private router: Router) {
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe(() => {
      let snapshot = this.router.routerState.root.snapshot;
      while (snapshot.firstChild) {
        snapshot = snapshot.firstChild;
        if (snapshot.paramMap.has('type')) {
          this.currentType = snapshot.paramMap.get('type');
          break;
        }
      }
    });
  }

  navigate(paths: any[]) {
    return this.router.navigate([this.currentType, ...paths]);
  }
}

使用时直接注入服务调用即可：

constructor(private typeNav: TypeNavService) {}

// 直接跳转，自动带上type参数
goToDetail(uid: string) {
  this.typeNav.navigate(['details', uid]);
}

内容的提问来源于stack exchange，提问作者suvenk