如何在父组件中获取活跃的子路由 Angular 2

Question

我想查看父组件中的活动子路由，但我不知道如何获取。我正在尝试使用 ActivatedRoute 但无法获取它。

我已经尝试了的两个答案：

我试过接受的答案：

constructor(
    private router:Router,
    private route: ActivatedRoute
 ) {
     var state = this.router.routerState
     var children = state.children(this.route)
 }

有了这个我得到了这个错误：

Property 'children' does not exist on type 'RouterState'

我也试过这个：

this.router.events.filter(evt => evt instanceof NavigationEnd)
   .map(evt => evt.url)
   .subscribe(url => console.log(url));

但是这个错误：

property 'url' does not exist on type 'Event'
property 'url' does not exist on type 'RouteConfigLoadStart'`

有什么想法吗？

Answer 1

我会说 Angular（通过 TypeScript）只是类型非常严格。你可以解决它......这是一个简单的例子，只是获取直接子路由的name/path。

this.router.events.filter(evt => evt instanceof NavigationEnd)
        .subscribe((event) => {
            console.log(event['url']);
            console.log(this.route.firstChild.routeConfig.path);
        });

Answer 2

别忘了导入 rxjs

import 'rxjs/add/operator/filter';

Answer 3

RxJS 的重载 filter 使其成为类型保护。然后输出变成一个实际的 NavigationError 对象，而不仅仅是 RouterEvent.

   this.router.events.pipe(filter((e): e is NavigationEnd => e instanceof NavigationEnd));

在您的 pipe(...) 中此后的任何内容都将是 NavigationEnd 类型并且将具有 url 类型。

我建议创建一个类似于 RouterEventsService 的辅助服务，并在其上创建您可以在任何地方使用的通用可观察对象。

像这样的简单服务：

@Injectable({ providedIn: 'root' })
export class RouterEventsService
{
    constructor(private router: Router) {}

    // navigation lifetime
    navigationStart$ = this.router.events.pipe(filter((e): e is NavigationStart => e instanceof NavigationStart));
    navigationEnd$ = this.router.events.pipe(filter((e): e is NavigationEnd => e instanceof NavigationEnd));

    // you can add clever things to it as needed
    navigationDurationMs$ = this.navigationStart$.pipe(switchMap(() => 
    {
        const startTime = new Date().getTime();
        return this.navigationEnd$.pipe(take(1), map(() => new Date().getTime() - startTime));
    }), 
    shareReplay(1));
}

如何在父组件中获取活跃的子路由 Angular 2

How to get active child route in parent component Angular 2

angular2-routing

angular