Angular2 (rc4) - 检查父组件中的活动子路由

Question

我正在尝试检查父组件中的活动子路由，但我遇到了困难。

我尝试通过如下方式订阅 ActivatedRoute：

class ParentComponent {
    constructor(private _route:ActivatedRoute) {}

    ngOnInit() {
        this._route.data.subscribe(value => console.log(value)});
    }
}

我已经阅读了很多关于 Stack Overflow 的帖子，但是找不到一个解决方案来检查和更新父组件的子路由。

有什么想法吗？

Answer 1

您可以使用下面的代码片段访问活跃的子路由

constructor(private router:Router, private currentActivatedRoute:ActivatedRoute)
// this should be called in ngOnInit
    var state = this.router.routerState
    var children = state.children(this.currentActivatedRoute)

RouterState, Tree

Answer 2

在写这些行时，所选答案似乎不再有效。

如果您想在路线更改时收到通知，可以订阅 Router.events 可观察对象。例如，NavigationEnd 事件将 url 存储为属性:

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

如果您想将当前路由与子路径进行比较 - 比方说 "child"-。您可以使用 Router.isActive() 方法：

let events = this.router.events;
events.filter(evt => evt instanceof NavigationEnd)
       .map(() =>{
            let exact=true;
            let childRoute=this.router.createUrlTree(["child"], {relativeTo: this.route}
            return this.router.isActive(childRoute,exact);
        })
        .subscribe(active=>console.log(`child route is active :${active`));

备注：

this.router 是一个 Router 实例
this.route 是 ActivatedRoute
exact 用于进行精确匹配：如果路由是 "child/grand-child" this.router.isActive(route,true) 将 return false

Angular2 (rc4) - 检查父组件中的活动子路由

Angular2 (rc4) - Check active child route in parent component

router

typescript

angular