如何獲取當前路線

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