如何获取当前路线

Question

当前文档仅讨论获取路线参数，而不是实际路线段。

例如，如果我想找到当前路线的父项，那怎么可能？

Answer 1

进样Location到您的组件和阅读location.path(); 您需要添加 ROUTER_DIRECTIVES这样的地方能角度解决 Location。 您需要将import: [RouterModule]添加到模块中。

更新

在你可以注入ActivatedRoute并访问使用其snapshot属性的细节的V3（RC.3）路由器。

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

或

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

也Angular 2 router event listener

Answer 2

看到在Angular2器Rc1你可以注入RouteSegment，并通过他们在naviagte方法。

constructor(private router:Router,private segment:RouteSegment) {} 

    ngOnInit() { 
    this.router.navigate(["explore"],this.segment) 
    } 

Answer 3

角2 RC2

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

Answer 4

新V3路由器具有url属性。

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

Answer 5

您可以使用ActivatedRoute来获得当前路由器

原来的答复（对RC版）

我发现AngularJS Google Group的解决方案，它是如此简单！

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

这里是原来的答案

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

Answer 6

角RC4：

您可以从@angular/router

导入Router然后把它注射：

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

然后调用它的URL参数：

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

Answer 7

您可以

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这给路径名试试。

Answer 8

正确答案今天将是：

1）进口ActivatedRoute：

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

2）创建你的类属性来存储网址：

private myUrl:any; 

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

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 9

为了您的目的，您可以使用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

npm install ng2-router-helper 

Answer 10

安装NG2路由器辅助新路由器> = 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 11

这可能是你的答案，激活航线的使用PARAMS方法从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 12

随着角度2.2.1（以一个angular2-的WebPack起动基于项目）的工作原理是：

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代码的启发。

Answer 13

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

constructor(private router: Router, private activatedRoute: ActivatedRoute){ 
    router.url //Gives you the string path from root to current route. i.e /Root/CurrentRoute 
    activatedRoute.url.value[0].path //Gives you just the fragment of the current route. i.e. 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 i.e. 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 14

这里是在角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" 
} 

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

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

Answer 15

这很简单，在角2你只需要导入路由器库这样的：

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 16

我不得不使用

this.router.url 

我与查询参数当前路由同样的问题。我采取的解决方法是使用此代替：

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

不是一个非常好的解决方案，但有帮助。

Answer 17

在Angular 4/5中获取路线段。

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

constructor(route: ActivatedRoute) {} 

getRoutes() { const segments: UrlSegment[] = this.route.snapshot.url; } 

Answer 18

要查找当前路线的父母，你可以从路由器UrlTree，使用相对路径：

var tree:UrlTree = router.createUrlTree(['../'], {relativeTo: route}); 

然后拿到第一出口的部分：

tree.root.children[PRIMARY_OUTLET].segments; 

Answer 19

使用此

constructor(private router: Router) { 
    router.events.filter(event => event instanceof NavigationEnd) 
     .subscribe(event => { 
      console.log(event); 
     }); 
} 

而且在main.ts进口

import 'rxjs/add/operator/filter'; 

Answer 20

天然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);