如何获得当前路线

目前的文件只讨论获取路线参数，而不是实际的路线段。

例如，如果我想find当前路线的父母，那怎么可能？

Answer 1

新的V3路由器有一个url属性。

 this.router.url === '/login' 

Answer 2

将Location注入到组件并读取location.path(); 您需要在某处添加ROUTER_DIRECTIVES ，以便Angular可以parsingLocation 。 您需要添加import: [RouterModule]到模块。

更新

在V3（RC.3）路由器中，您可以注入ActivatedRoute并使用其snapshot属性访问更多详细信息。

 constructor(private route:ActivatedRoute) { console.log(route); } 

要么

 constructor(private router:Router) { router.events.subscribe(...); } 

另请参阅Angular 2路由器事件侦听器

Answer 3

angular度RC4：

您可以从@angular/router导入@angular/router

然后注入它：

 constructor(private _router: Router ) { this.router = _router; } 

然后调用它的URL参数：

 console.log(this.router.url); // /routename 

Answer 4

对于新路由器> = 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" } 

Answer 5

对于那些仍在寻找这个。 在Angular 2.x中，有几种方法可以做到这一点。

 constructor(private router: Router, private activatedRoute: ActivatedRoute){ router.url //Gives you the string path from root to current route. ie /Root/CurrentRoute activatedRoute.url.value[0].path //Gives you just the fragment of the current route. ie CurrentRoute activatedRoute.url.subscribe((url: urlSegment)=> console.log(url[0].path)) //The same as above activatedRoute.snapshot.url[0].path //Save as above //Since the parent is an ActivatedRoute object, you can get the same using activatedRoute.parent.url.value[0].path // Gives you the url fragment from the parent route ie Root } 

参考文献：

1. https://angular.io/docs/ts/latest/api/router/index/ActivatedRoute-interface.html
2. https://angular.io/docs/ts/latest/api/router/index/Router-class.html
3. https://angular.io/docs/ts/latest/guide/router.html

Answer 6

你可以试试

 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. 

提供path名的window.location.pathname 。

Answer 7

在Angular4中获取路线段。

 import { ActivatedRoute, UrlSegment } from '@angular/router'; constructor( route: ActivatedRoute) {} getRoutes() { const segments: UrlSegment[] = this.route.snapshot.url; } 

Answer 8

在Angular2 Rc1中，您可以注入RouteSegment并将其传递给naviagte方法。

 constructor(private router:Router,private segment:RouteSegment) {} ngOnInit() { this.router.navigate(["explore"],this.segment) } 

Answer 9

angular2 rc2

 router.urlTree.contains(router.createUrlTree(['/home'])) 

Answer 10

今天正确的答案是：

1）导入ActivatedRoute：

 import {ActivatedRoute} from '@angular/router'; 

2）在你的类中创build一个属性来存储url：

 private myUrl:any; 

3）从ActivatedRoute在构造函数中创build一个实例，并得到你想要的一切：

 constructor (...private route:ActivatedRoute, ...) { this.route.url.subscribe( (data: any) => { for (let i of data) { this.myUrl = i.path; // ... get whatever you want } console.log("My Current Url ", this.myUrl); console.log("There is something more: ",data); }, (error: any) => console.debug("URL ERROR", error)); } 

Answer 11

以下是在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 eg "/home" } 

data是一个对象，我们需要包含在该对象中的url属性。 所以我们在variables中捕获这个值，我们也可以在HTML页面中使用这个variables。 例如，我只想在用户在主页上时显示一个div。 在这种情况下，我的路由器url值将是/home 。 所以我可以用下面的方式写一个div：

 <div *ngIf="location == '/home'"> This is content for the home page. </div> 

Answer 12

为了您的目的，您可以使用this.activatedRoute.pathFromRoot 。

 import {ActivatedRoute} from "@angular/router"; constructor(public activatedRoute: ActivatedRoute){ } 

在pathFromRoot的帮助下，您可以获取父url的列表，并检查URL的所需部分是否与您的条件匹配。

有关更多信息，请参阅http://blog.2muchcoffee.com/getting-current-state-in-angular2-router/或从npm安装ng2-router-helper

 npm install ng2-router-helper 

Answer 13

使用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}}。

这个解决scheme受到了RouterLinkActive的代码的启发。

Answer 14

这很简单，在angular2你只需要像这样导入路由器库：

 import { Router } from '@angular/router'; 

然后在组件或服务的构造函数中，你必须像这样实例化它：

 constructor(private _router: Router) {} 

然后在代码的任何部分，无论是在函数，方法，构造，无论：

  this._router.events .subscribe( (url:any) => { let _ruta = ""; url.url.split("/").forEach(element => { if(element!=="" && _ruta==="") _ruta="/"+element; }); console.log("route: "+_ruta); //<<<---- Root path console.log("to URL:"+url.url); //<<<---- Destination URL console.log("from URL:"+this._router.url);//<<<---- Current URL }); 

Answer 15

您可以使用ActivatedRoute获取当前的路由器

原始答案（RC版）

我在AngularJS Google Group上find了一个解决scheme，非常简单！

 ngOnInit() { this.router.subscribe((url) => console.log(url)); } 

这是原来的答案

https://groups.google.com/d/msg/angular/wn1h0JPrF48/zl1sHJxbCQAJ

Answer 16

这可能是你的答案，使用激活路由的参数方法来获取您想要读取的URL /路由的参数，下面是演示片段

 import {ActivatedRoute} from '@angular/router'; @Component({ }) export class Test{ constructor(private route: ActivatedRoute){ this.route.params.subscribe(params => { this.yourVariable = params['required_param_name']; }); } } 

Answer 17

我有同样的问题使用

 this.router.url 

我用查询参数获取当前路由。 我做的一个解决方法是使用这个，而不是：

 this.router.url.split('?')[0] 

不是一个很好的解决scheme，但有帮助。