目前的文档只讨论获取路由参数,而不是实际的路径段.
例如,如果我想找到当前路线的父母,那怎么可能呢?
新的V3路由器有一个url属性.
this.router.url === '/login'
角度RC4:
您可以导入Router
从@angular/router
然后注入它:
constructor(private router: Router ) { }
然后调用它的URL参数:
console.log(this.router.url); // /routename
注入Location
组件并读取location.path();
您需要添加您需要添加ROUTER_DIRECTIVES
某个位置以便Angular可以解析Location
.import: [RouterModule]
到模块.
更新
在V3(RC.3)路由器中,您可以ActivatedRoute
使用其snapshot
属性注入和访问更多详细信息.
constructor(private route:ActivatedRoute) {
console.log(route);
}
要么
constructor(private router:Router) {
router.events.subscribe(...);
}
另请参见Angular 2路由器事件侦听器
对于新路由器> = RC.3
最好也是一个简单的方法!
import { Router } from '@angular/router'; constructor(router: Router) { router.events.subscribe((url:any) => console.log(url)); console.log(router.url); // to print only path eg:"/login" }
对于那些仍在寻找这个的人.在Angular 2.x上有几种方法可以做到这一点.
constructor(private router: Router, private activatedRoute: ActivatedRoute){ // string path from root to current route. i.e /Root/CurrentRoute router.url // just the fragment of the current route. i.e. CurrentRoute activatedRoute.url.value[0].path // same as above with urlSegment[] activatedRoute.url.subscribe((url: urlSegment[])=> console.log(url[0].path)) // same as above activatedRoute.snapshot.url[0].path // the url fragment from the parent route i.e. Root // since the parent is an ActivatedRoute object, you can get the same using activatedRoute.parent.url.value[0].path }
参考文献:
https://angular.io/docs/ts/latest/api/router/index/ActivatedRoute-interface.html
https://angular.io/docs/ts/latest/api/router/index/Router-class.html
https://angular.io/docs/ts/latest/guide/router.html
获取路线段:
import { ActivatedRoute, UrlSegment } from '@angular/router'; constructor( route: ActivatedRoute) {} getRoutes() { const segments: UrlSegment[] = this.route.snapshot.url; }
用这个
import { Router, NavigationEnd } from '@angular/router'; constructor(private router: Router) { router.events.filter(event => event instanceof NavigationEnd) .subscribe(event => { console.log(event); }); }
并在main.ts
进口
import 'rxjs/add/operator/filter';
你可以试试
import { Router, ActivatedRoute} from '@angular/router'; constructor(private router: Router, private activatedRoute:ActivatedRoute) { console.log(activatedRoute.snapshot.url) // array of states console.log(activatedRoute.snapshot.url[0].path) }
替代方式
router.location.path(); this works only in browser console.
window.location.pathname
它给出了路径名称.
要可靠地获得完整的当前路线,您可以使用它
this.router.events.subscribe( (event: any) => { if (event instanceof NavigationEnd) { console.log('this.router.url', this.router.url); } } );
本机window
对象也可以正常工作
console.log('URL:' + window.location.href); console.log('Path:' + window.location.pathname); console.log('Host:' + window.location.host); console.log('Hostname:' + window.location.hostname); console.log('Origin:' + window.location.origin); console.log('Port:' + window.location.port); console.log('Search String:' + window.location.search);
注意:请勿在服务器端部渲染中使用它
简短的版本,如果您导入了路由器,那么您可以简单地使用诸如
this.router.url ===“ /搜索”
否则请执行以下操作
1)导入路由器
import { Router } from '@angular/router';
2)在构造函数中声明其条目
constructor(private router: Router) { }
3)在您的函数中使用其值
yourFunction(){ if(this.router.url === "/search"){ //some logic } }
@victor的答案对我有所帮助,这与他的答案相同,但有一点细节,因为它可能对某人有帮助
在Angular2 Rc1中,您可以注入RouteSegment并以naviagte方法传递它们.
constructor(private router:Router,private segment:RouteSegment) {} ngOnInit() { this.router.navigate(["explore"],this.segment) }
使用angular 2.2.1(在基于angular2-webpack-starter的项目中)可以做到这一点:
export class AppComponent { subscription: Subscription; activeUrl: string; constructor(public appState: AppState, private router: Router) { console.log('[app] constructor AppComponent'); } ngOnInit() { console.log('[app] ngOnInit'); let _this = this; this.subscription = this.router.events.subscribe(function (s) { if (s instanceof NavigationEnd) { _this.activeUrl = s.urlAfterRedirects; } }); } ngOnDestroy() { console.log('[app] ngOnDestroy: '); this.subscription.unsubscribe(); } }
在AppComponent的模板中,您可以使用{{activeUrl}}。
该解决方案的灵感来自RouterLinkActive的代码。