Angular 2父组件获取激活子路由失败，两种方案均报错求解决

我来帮你搞定这个问题，先拆解下你遇到的报错原因，再给出适配Angular 2的可行方案：

一、关于RouterState没有children属性的错误 #

你之前参考的旧方案是针对更早的Angular 2版本（比如rc4之前），但后续版本里RouterState的API做了调整，children()方法被移除了。要获取当前路由的子路由，我们可以直接通过ActivatedRoute的children属性来访问，或者结合路由树遍历实现。

实时监听激活的子路由 #

如果需要实时感知子路由的变化，可以在父组件中订阅ActivatedRoute的children变化：

import { ActivatedRoute } from '@angular/router';
import { map } from 'rxjs/operators';

constructor(private route: ActivatedRoute) {
  // 监听子路由的URL变化
  this.route.children.pipe(
    map(children => children[0]?.url.join('/'))
  ).subscribe(activeChildPath => {
    console.log('当前激活的子路由路径:', activeChildPath);
    // 这里可以根据路径判断是否是你要检测的子路由
    if (activeChildPath === 'your-target-child-route') {
      // 执行对应的逻辑
    }
  });
}

二、关于Event没有url属性的错误 #

这个问题源于TypeScript的类型检查：router.events发出的事件是泛型Event类型，其中只有NavigationEnd类型才包含url属性。你需要在订阅时明确断言类型，或者在管道里更精准地过滤事件：

修正后的路由事件监听代码 #

import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

constructor(private router: Router) {
  this.router.events.pipe(
    // 只保留NavigationEnd类型的事件
    filter(evt => evt instanceof NavigationEnd)
  ).subscribe((evt: NavigationEnd) => {
    console.log('当前路由URL:', evt.url);
    // 可以通过判断url是否包含子路由路径来检测激活状态
    if (evt.url.includes('/parent-path/child-path')) {
      // 子路由激活时的逻辑
    }
  });
}

三、更简便的判断子路由是否激活的方法 #

如果你只是需要判断某个特定子路由是否处于激活状态，可以直接使用Router的isActive()方法：

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

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

// 传入子路由的路径，返回是否激活
isTargetChildActive(childRoutePath: string): boolean {
  // 拼接父路由和子路由的完整路径
  const fullChildRoute = `${this.route.routeConfig.path}/${childRoutePath}`;
  // 第二个参数为true表示严格匹配路由规则
  return this.router.isActive(fullChildRoute, true);
}

你还可以在父组件的模板里直接调用这个方法，比如实现高亮效果：

<div [class.active]="isTargetChildActive('child-route-1')">
  子路由1激活时高亮显示
</div>

这些方案都是适配Angular 2后期版本的，能解决你遇到的类型错误问题。

内容的提问来源于stack exchange，提问作者Aakriti.G