Angular2 @angular/router 3.0.0-alpha.3 - 如何在路由更改时获取路由名称或路径 [英] Angular2 @angular/router 3.0.0-alpha.3 - How to get route name or path when route changes
问题描述
我正在尝试在路由更改时获取 app.component 中的当前路由名称或路由路径,以便我可以将路由名称用作围绕包装器 div 的页面类.我正在尝试找出处理此问题的最佳方法.以前,我订阅了如下所列的路由器更改属性,但@angular/router 3.0.0-alpha.3 似乎不再提供此属性.如果有人有任何想法或建议,我将不胜感激.
I'm trying to get the current route name or route path in my app.component when the route changes so that I can use the route name as a page class around a wrapper div. I'm trying to figure out the best way to handle this. Previously I was subscribing to the router changes property like I have listed below, but it seems like this is no longer available with @angular/router 3.0.0-alpha.3. If anyone has any thoughts or suggestions I would be most grateful.
this.router.changes.subscribe((val) => {
var path = this._location.path();
if (path.indexOf('page-name') !== -1) {
this.pageClass = 'page-name';
}
})
推荐答案
Steve 的答案是当前记录的答案,但是 ActivatedRoute
上的 url observable 没有为我触发,除非我第一次击中基地url(例如:从/index 到/index/item 有效,但从/index/item 到 index/item/2、index/dashboard,甚至/index 都不起作用).
Steve's answer is the one documented currently, but the url observable on ActivatedRoute
is not firing for me except when I first hit the base url (ex: going from /index to /index/item works, but going from /index/item to index/item/2, index/dashboard, or even /index does not).
我不确定以下解决方案是否是最佳实践,也不确定对性能的影响是什么,但我能够在路由器的 NavigationEnd
事件上获得活动路由,如下所示:
I'm not sure if the following solution is a best practice nor what the performance implications are, but I was able to get the active route on the NavigationEnd
event of the router with the following:
import { Component, OnInit, OnDestroy } from '@angular/core';
import { ROUTER_DIRECTIVES, Router, NavigationEnd } from '@angular/router';
@Component({
selector: 'navbar',
directives: [ROUTER_DIRECTIVES],
template: `
...
`
})
export class NavBarComponent implements OnInit, OnDestroy {
private sub: any;
constructor(private router: Router) {
}
ngOnInit() {
this.sub = this.router.events.subscribe(e => {
if (e instanceof NavigationEnd) {
console.log(e.url);
}
});
}
ngOnDestroy() {
this.sub.unsubscribe();
}
}
每次更改路线时都会触发,无论您在 url 树中有多深或导航到/从哪里.
This fires every time you change the route, regardless of how deep you are in the url tree or where you navigate to/from.
这篇关于Angular2 @angular/router 3.0.0-alpha.3 - 如何在路由更改时获取路由名称或路径的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!