如何通过ActivatedRoute获取Angular 5的路由首段？

嘿，我来帮你搞定这个问题！在Angular5里，用ActivatedRoute获取第一个路由段其实很简单，这里有两种靠谱的方法，你可以根据自己的场景选择：

方法一：通过pathFromRoot获取（通用型，推荐） #

ActivatedRoute的pathFromRoot属性会返回一个路由数组，包含从根路由到当前激活路由的所有节点。我们只需要取数组里的第二个元素（因为第一个是空的根路由），然后拿到它的url路径段即可。

示例代码：

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

@Component({
  selector: 'app-item', // 或者 app-basket
  templateUrl: './item.component.html'
})
export class ItemComponent implements OnInit {
  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    // 获取第一个路由段（fruits 或 veggies）
    const firstRouteSegment = this.route.pathFromRoot[1].url[0].path;
    console.log('当前父路由段：', firstRouteSegment);
  }
}

这个方法的好处是不管你的组件在路由树的哪个层级（比如即使后来加了更深的嵌套路由/fruits/item/detail），都能准确拿到最外层的第一个路径段，通用性拉满。

方法二：通过parent路由获取（适合直接子组件） #

如果你的组件是父路由的直接子组件（比如item是fruits的直接子组件，basket是veggies的直接子组件），也可以直接通过route.parent拿到父路由节点，再获取路径段：

示例代码：

ngOnInit() {
  const parentRouteSegment = this.route.parent.url[0].path;
  console.log('当前父路由段：', parentRouteSegment);
}

不过要注意，如果后续路由结构有变化（比如加了多层嵌套），route.parent可能指向的不是最外层的父路由，这时候就会出错，所以更推荐第一种方法。

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