目前的文档只讨论了获取路由参数,而不是实际的路由段。
例如,如果我想找到当前路由的父,这是怎么可能的?
目前的文档只讨论了获取路由参数,而不是实际的路由段。
例如,如果我想找到当前路由的父,这是怎么可能的?
当前回答
import {ActivatedRoute} from '@angular/router';
constructor(private route:ActivatedRoute){
console.log(this.route.routeConfig.path);
}
其他回答
将Location注入组件并读取Location .path(); 你需要在某个地方添加ROUTER_DIRECTIVES,这样Angular才能解析Location。你需要在这个模块中添加import: [RouterModule]。
更新
在V3 (RC.3)路由器中,您可以注入ActivatedRoute,并使用它的snapshot属性访问更多细节。
constructor(private route:ActivatedRoute) {
console.log(route);
}
or
constructor(private router:Router) {
router.events.subscribe(...);
}
另见Angular 2的路由器事件侦听器
我也有同样的问题
this.router.url
我用查询参数获取当前路由。我做的一个变通方法是使用这个:
this.router.url.split('?')[0]
这不是一个很好的解决方案,但很有帮助。
下面是我在Angular 2.3.1中工作的地方。
location: any;
constructor(private _router: Router) {
_router.events.subscribe((data:any) => { this.location = data.url; });
console.warn(this.location); // This should print only path e.g. "/home"
}
数据是一个对象,我们需要该对象中包含的url属性。所以我们在变量中获取这个值,我们也可以在HTML页面中使用这个变量。例如,我想显示一个div仅当用户在主页上。在这种情况下,我的路由器url值将是/home。所以我可以用下面的方式写一个div:
<div *ngIf="location == '/home'">
This is content for the home page.
</div>
如果你需要访问当前url,通常你必须等待NavigationEnd或NavigationStart来做一些事情。如果你只是订阅路由器事件,订阅会在路由生命周期中输出许多事件。相反,使用RxJS操作符只过滤你需要的事件。这样做的有利副作用是现在我们有更严格的类型!
constructor(private router: Router) {
router.events.pipe(
filter(ev => (ev instanceof NavigationEnd))
).subscribe((ev: NavigationEnd) => {
console.log(ev.url);
});
}
import { Router, NavigationEnd } from "@angular/router";
constructor(private router: Router) {
// Detect current route
router.events.subscribe(val => {
if (val instanceof NavigationEnd) {
console.log(val.url);
}
});
}