Angular2（rc4）- 在父组件中检查活动子路由

Question

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

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

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

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

我在Stack Overflow上阅读了很多帖子，但找不到一个解决方案来检查并获取父组件的子路由的更新。

有什么想法吗？

- Valdemar Edvard Sandal Rolfsen

Answer 1

写下这些文字时，所选答案似乎已不再有效。

如果你想在路由更改时收到通知，可以订阅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) 将返回 false

- n00dl3

---

出现以下错误.. 属性'url'在类型“Event”上不存在 属性'url'在类型“RouteConfigLoadStart”上不存在 - Aakriti.G

@Aakriti 你需要过滤路由器事件并仅获取 NavigationEnd 事件。 this.router.events.filter(evt => evt instanceof NavigationEnd) （可能需要断言类型为 Observable<NavigationEnd>，像这样：this.router.events.filter(evt => evt instanceof NavigationEnd) as Observable<NavigationEnd>） - n00dl3

我们如何在这里使用map呢？它显示“找不到名称map”。 - Aakriti.G

Answer 2

您可以使用以下代码片段访问活动子路由。

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

- Arpit Agarwal

---

“属性'children'在类型'RouterState'上不存在” - Inigo

不确定自回答发布以来有没有更改，但是children是ActivatedRoute的属性，而不是Router的。 - Inigo