如何从Angular子路由组件获取父路由URL中的params id？

嘿，这个问题我碰到过不少次！你拿不到父路由的id是因为当前组件的ActivatedRoute默认只读取自身路由节点的参数，而父路由的参数存在它的parent属性里。给你几个可行的方案：

方案1：直接读取父路由快照的参数 #

如果你的父路由参数不会在组件生命周期内变化（比如不会从profile/45666/albums跳转到profile/78999/albums而不刷新组件），直接用快照获取就足够了：

import { ActivatedRoute } from '@angular/router';
import { OnInit } from '@angular/core';

export class AlbumsComponent implements OnInit {
  constructor(private _route: ActivatedRoute) {}

  ngOnInit(): void {
    // 用可选链操作符?.避免parent为null的潜在风险
    const parentId = this._route.parent?.snapshot.params['id'];
    console.log(parentId); // 输出 45666
  }
}

方案2：订阅父路由的参数变化 #

如果父路由的id可能在组件存活时发生变化（比如通过路由导航更新参数但不销毁当前组件），推荐订阅parent的paramMap来监听参数变化：

import { ActivatedRoute } from '@angular/router';
import { OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';

export class AlbumsComponent implements OnInit, OnDestroy {
  private paramSubscription?: Subscription;

  constructor(private _route: ActivatedRoute) {}

  ngOnInit(): void {
    this.paramSubscription = this._route.parent?.paramMap.subscribe((paramMap) => {
      const parentId = paramMap.get('id');
      console.log(parentId); // 每次父路由id变化时都会触发
    });
  }

  ngOnDestroy(): void {
    // 记得销毁订阅，避免内存泄漏
    this.paramSubscription?.unsubscribe();
  }
}

补充说明 #

你的路由结构中，profile/:id是父路由节点，albums是它的子路由节点。Angular的ActivatedRoute是分层的，每个路由节点对应一个ActivatedRoute实例，子组件的ActivatedRoute的parent属性就指向父路由的实例，所以我们能从这里拿到父路由的参数。

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