Angular 2中ActivatedRoute返回空值及路由URL片段获取问题

嘿，我来帮你搞定从Angular路由里提取指定部分的需求！你要从localhost/messages/inbox里拿到messages，其实用ActivatedRoute就能轻松实现，下面给你两种常用的处理方式：

1. 使用路由快照（适合组件初始化后路由不会变化的场景） #

如果你的组件只会在初始化时获取一次路由信息，直接用路由快照就能快速拿到目标段：

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

@Component({
  selector: 'app-sub-nav',
  templateUrl: './sub-nav.component.html',
  styleUrls: ['./sub-nav.component.css']
})
export class SubNavComponent implements OnInit {
  targetRouteSegment: string = '';

  constructor(private activatedRoute: ActivatedRoute) { }

  ngOnInit(): void {
    // 获取URL的分段数组，比如/messages/inbox会返回[{path: 'messages'}, {path: 'inbox'}]
    const urlSegments = this.activatedRoute.snapshot.url;
    // 取第一个分段的path就是你要的'messages'
    if (urlSegments.length > 0) {
      this.targetRouteSegment = urlSegments[0].path;
    }
  }
}

2. 订阅路由变化（适合组件在同一页面内路由会切换的场景） #

如果你的组件会在路由切换时保留（比如路由复用场景），那最好订阅路由变化事件，实时更新目标段：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
import { Subscription } from 'rxjs';
import { filter } from 'rxjs/operators';

@Component({
  selector: 'app-sub-nav',
  templateUrl: './sub-nav.component.html',
  styleUrls: ['./sub-nav.component.css']
})
export class SubNavComponent implements OnInit, OnDestroy {
  targetRouteSegment: string = '';
  private routerSub!: Subscription;

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

  ngOnInit(): void {
    // 只监听导航完成的事件，确保拿到最新的路由状态
    this.routerSub = this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe(() => {
      const urlSegments = this.activatedRoute.snapshot.url;
      if (urlSegments.length > 0) {
        this.targetRouteSegment = urlSegments[0].path;
      }
    });
  }

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

额外说明 #

如果你的路由是嵌套结构（比如/dashboard/messages/inbox），可以通过调整urlSegments的索引来获取对应分段——比如要拿messages就取urlSegments[1].path即可，完全适配你的路由结构。

内容的提问来源于stack exchange，提问作者Web Develop Wolf