Cara mendapatkan rute saat ini


472

Dokumen saat ini hanya berbicara tentang mendapatkan parameter rute, bukan segmen rute yang sebenarnya.

Misalnya, jika saya ingin mencari induk dari rute saat ini, bagaimana itu mungkin?


25
window.location.pathname
dchacke

1
@dchacke masalah dengan window.locationadalah bahwa jika di masa depan, mereka ingin mengimplementasikan rendering sisi server, mereka akan menghadapi beberapa kesulitan karena windowtidak ada pada server Node.js, tetapi mereka perlu menggunakan metode standar Angular untuk mengakses rute. dan mereka akan baik-baik saja di server dan browser.
Mohammad Kermani

Ya, masuk akal. Mereka yang menggunakan atau berencana untuk menggunakan rendering sisi server harus mempertimbangkan ini.
dchacke

Jawaban:


523

Router V3 baru memiliki properti url.

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

5
Saya menggunakan kode ini dan saya mendapatkan url ini dalam variabel string tetapi ketika saya mencoba untuk mencetak di konsol .log tidak mencetak this.fullUrl = this.router.url console.log (this.fullUrl); // tidak mencetak
vijay gupta

3
Lihat menggunakan fitur aktif router baru <a routerLink="/dashboard" routerLinkActive="active"> Dasbor </a>
Victor96

34
ini tidak berguna ketika Anda menavigasi dengan strategi Hash, url selalu "/"
Ninja Coding

5
@NinjaCoding Saya menggunakan strategi Hash dan saya hanya mendapatkan "/". Bagaimana saya bisa mendapatkan url rute dengan Hash?
Murtuza

9
@Murtuza di sini adalah solusi: this.router.events.filter((event: any) => event instanceof NavigationEnd).subscribe(event => { console.log('this is what your looking for ', event.url); });. Pastikan Anda mengimporimport { Router, NavigationEnd } from '@angular/router';
Gel

161

RC4 sudut:

Anda bisa mengimpor Router dari@angular/router

Kemudian disuntikkan:

constructor(private router: Router ) {

}

Lalu panggil parameter URL-nya:

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

2
Kejelasan ekstra tentang cara mengimpor router itu sendiri sangat membantu. Bisakah Anda mengklarifikasi jika akan berbeda jika Anda menggunakan Router khusus?
kbpontius

1
Itu tentu akan tergantung pada 'custom-ness' dari Router kustom. (maaf ini bukan komentar yang sangat membantu - jika Anda memiliki pertanyaan spesifik, saya sarankan membuat pertanyaan baru dan merujuk jawaban ini)
lowcrawler

42
Saya menggunakan solusi ini, tetapi saya selalu mendapatkan ini "/". Adakah yang tahu mengapa?
Marcio M.

4
Angular Dependency Injection bergantung pada sintaksis gula TypeScript, jadi ketika Anda mendeklarasikan private _router: Router dalam tanda tangan konstruktor, properti _router secara otomatis dibuat dalam instance kelas saat ini dengan Router yang diinjeksikan. Pernyataan ini this.router = _router; hanyalah overhead bagi saya, karena Anda akan memiliki dua referensi ke instance objek yang sama (dalam hal ini, Router).
Andrew Reborn

1
@ Marcio M. Mungkin karena router belum benar-benar mencapai keadaan itu, meskipun URL menunjukkan berbeda. Misalnya, jika Anda melihat router.url di layanan penjaga. location.path () seperti yang disebutkan dalam jawaban akan memberi Anda url, apa pun keadaan routernya.
Daniel van Niekerk

61

Suntikkan Locationke komponen Anda dan baca location.path(); Anda harus menambahkan ROUTER_DIRECTIVESsuatu tempat sehingga Angular dapat menyelesaikannya Location. Anda perlu menambahkan import: [RouterModule]ke modul.

Memperbarui

Di router V3 (RC.3) Anda dapat menyuntikkan ActivatedRoutedan mengakses lebih banyak detail menggunakan snapshotpropertinya.

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

atau

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

Lihat juga Pendengar peristiwa router 2 sudut


3
itu memberi saya jalan 'url'. bagaimana cara menemukan 'nama rute' sehingga saya bisa meneruskannya dalam larik ke navigatemetode bersama dengan (ditambahkan) nama rute anak yang ingin saya navigasikan.
pdeva

Saya melihat. Saya juga merasa ini tidak memuaskan. Saya belum mencobanya sendiri tapi mungkin yang MyTrackingServicedijelaskan di stackoverflow.com/a/34548656/217408 akan memungkinkan untuk mengakses nilai-nilai ini.
Günter Zöchbauer

Nama rute hilang sekarang.
Günter Zöchbauer

4
@GunterZochbauer apakah ada cara untuk mendapatkan rute yang diminta sebelum diaktifkan? Misalnya, jika saya ingin menyimpan rute yang diminta di dalam suatu canActivate()metode, sehingga saya bisa mengarahkan ulang ke halaman "login", dan kemudian mengarahkan kembali ke rute asli setelah pengguna mengautentikasi?
Yevgeny Ananin

1
Tidak bisakah kau melakukannya dengan penjaga canActivate?
Günter Zöchbauer

42

untuk router baru> = RC.3

Cara terbaik dan sederhana untuk melakukan ini adalah!

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"
}

Bagaimana jawaban ini berbeda dari jawaban lowcrawler?
not2savvy

1
@ not2savvy telah memberikan satu cara lagi untuk mencari tahu hal yang sama melalui pendengar acara router, yang membantu beberapa orang menemukan apa yang mereka cari.
Rajath MS

36

Gunakan ini

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

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

Dan di main.tsimpor

import 'rxjs/add/operator/filter';

EDIT

Cara modern

import {filter} from 'rxjs/operators';

router.events.pipe(
    filter(event => event instanceof NavigationEnd)
)
    .subscribe(event => {
        console.log(event);
    });

11
Apakah ini benar-benar cara yang disarankan untuk melakukan sesuatu yang sederhana seperti memeriksa di mana URL saat ini menunjuk? Saya tidak berdebat dengan Anda tentang hal ini. Namun, saya perhatikan bahwa hal perutean adalah sumber dari banyak perubahan, pembaruan, kebingungan dll. Saya agak berharap bahwa ActivatedRoute akan digunakan terutama untuk ini, bukan Router . Apakah saya melewatkan kompleksitas masalah, mungkin?
DonkeyBanana

Saya merujuk ke ActivatedRoute di dokumen resmi.
DonkeyBanana

1
Tidak perlu untuk setidaknya di sini, ekspor router "RouterEvent" jenis yang diperpanjang oleh peristiwa router lainnya - angular.io/api/router/RouterEvent
chrismarx

1
@chrismarx diperbaiki
Vlad

@DonkeyBanana Sebenarnya, jika Anda berurusan dengan modul bersarang yang berisi rute mereka sendiri, maka ya. Bahkan, dengan menggunakan modul dan router bersarang (yang bahkan direkomendasikan oleh Tim Angular) ini adalah satu - satunya cara untuk mendapatkan URL aktual dari rute saat ini, semua metode lain hanya akan kembali /.
Eagerestwolf

32

Bagi yang masih mencari ini. Pada Angular 2.x ada beberapa cara untuk melakukannya.

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
}

Referensi:

  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

27

Untuk mendapatkan segmen rute:

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

constructor( route: ActivatedRoute) {}

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

14

Anda bisa mencobanya

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

Cara alternatif

router.location.path();   this works only in browser console. 

window.location.pathname yang memberi nama path.


update: activatedRoute.snapshot.url sekarang dapat diobservasi dan Anda harus berlangganan untuk itu.
Sadok Mtir

12

Untuk mendapatkan rute lengkap sepenuhnya saat ini, Anda dapat menggunakan ini

this.router.events.subscribe(
  (event: any) => {
    if (event instanceof NavigationEnd) {
      console.log('this.router.url', this.router.url);
    }
  }
);

9

windowObjek asli berfungsi dengan baik juga

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

CATATAN: JANGAN GUNAKAN INI DALAM RENDERING SISI SERVER


1
Hati-hati jika Anda menggunakan rendering sisi server, ini akan rusak.
Jason Foglia

7

versi singkat jika Anda memiliki Router diimpor maka Anda cukup menggunakan beberapa hal seperti

this.router.url === "/ search"

lain lakukan hal berikut

1) Impor router

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

2) Nyatakan entri dalam konstruktor

constructor(private router: Router) { }

3) Gunakan nilainya dalam fungsi Anda

yourFunction(){
    if(this.router.url === "/search"){
        //some logic
    }
}

@victor menjawab membantu saya, ini adalah jawaban yang sama dengan dia tetapi dengan sedikit detail, karena mungkin membantu seseorang


6
import { Router } from '@angular/router';
constructor(router: Router) { 
      console.log(router.routerState.snapshot.url);
}

5

Di Angular2 Rc1 Anda dapat menyuntikkan RouteSegment dan meneruskannya dengan metode naviagte.

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

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

5

Dengan angular 2.2.1 (dalam proyek berbasis angular2-webpack-starter) berfungsi sebagai berikut:

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

Dalam templat AppComponent, Anda dapat menggunakan mis {{activeUrl}}.

Solusi ini terinspirasi oleh kode RouterLinkActive.


ini adalah jawaban yang bagus b / c jika Anda memiliki rute kartu liar yang mengarahkan kembali ke / home event.url tidak cukup untuk mencocokkan dengan / rute rumah itu sebenarnya akan menunjukkan rute yang tidak ada. event.urlAfterRedirects akan mencetak rute akhir yang sebenarnya. ty.
Ian Poston Framer

4

sudut 2 rc2

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

4

Inilah yang bekerja untuk saya dalam 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"
}

Ini dataadalah objek dan kita perlu urlproperti yang terkandung dalam objek itu. Jadi kami menangkap nilai itu dalam suatu variabel dan kami dapat menggunakan variabel itu di halaman HTML kami juga. Sebagai contoh, saya ingin menampilkan div hanya ketika pengguna di halaman Beranda. Dalam hal ini, nilai url router saya akan menjadi /home. Jadi saya bisa menulis div dengan cara berikut:

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

4

Saya punya masalah yang sama menggunakan

this.router.url

Saya mendapatkan rute saat ini dengan params permintaan. Solusi yang saya lakukan adalah menggunakan ini sebagai gantinya:

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

Bukan solusi yang sangat bagus, tetapi sangat membantu.



4

CARA 1 : Menggunakan Angular: this.router.url

import { Component } from '@angular/core';

// Step 1: import the router 
import { Router } from '@angular/router';

@Component({
    template: 'The href is: {{href}}'
    /*
    Other component settings
    */
})
export class Component {
    public href: string = "";

    //Step 2: Declare the same in the constructure.
    constructor(private router: Router) {}

    ngOnInit() {
        this.href = this.router.url;
        // Do comparision here.....
        ///////////////////////////
        console.log(this.router.url);
    }
}

WAY 2 Window.lokasi seperti yang kita lakukan di Javascript, Jika Anda tidak ingin menggunakan router

this.href= window.location.href;

3

Untuk keperluan Anda, Anda dapat menggunakan this.activatedRoute.pathFromRoot.

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

}

Dengan bantuan pathFromRoot Anda bisa mendapatkan daftar url induk dan memeriksa apakah bagian yang diperlukan dari URL sesuai dengan kondisi Anda.

Untuk informasi tambahan, silakan baca artikel ini http://blog.2muchcoffee.com/getting-current-state-in-angular2-router/ atau menginstal ng2-router-helper dari npm

npm install ng2-router-helper

3

Untuk menemukan induk dari rute saat ini, Anda dapat memperolehnya UrlTreedari router, menggunakan rute relatif:

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

Kemudian untuk mendapatkan segmen dari outlet utama:

tree.root.children[PRIMARY_OUTLET].segments;

3

Sampai sekarang, saya mendapatkan jalur saya sebagai berikut -

this.router.url.subscribe(value => {
    // you may print value to see the actual object
    // console.log(JSON.stringify(value));
    this.isPreview = value[0].path === 'preview';
})

Di mana, routeradalah contoh dariActivatedRoute



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

2

ini sederhana, di sudut 2 Anda hanya perlu mengimpor perpustakaan Router seperti ini:

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

Kemudian dalam konstruktor komponen atau layanan Anda harus instantiate seperti ini:

constructor(private _router: Router) {}

Kemudian di bagian mana pun dari kode, baik dalam fungsi, metode, konstruksi, apa pun:

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

2

Anda dapat menggunakan file .ts

import { Route, Router, NavigationStart } from '@angular/router';

constructor(private router: Router) {}

this.router.events.subscribe(value => {
      if (value instanceof NavigationStart) {
        console.log(value) // your current route
      }
    });

1

ini bisa menjadi jawaban Anda, gunakan metode params dari rute yang diaktifkan untuk mendapatkan parameter dari URL / rute yang ingin Anda baca, di bawah ini adalah cuplikan demo

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

1
this.router.events.subscribe((val) => {
   const currentPage = this.router.url; // Current page route
  const currentLocation = (this.platformLocation as any).location.href; // Current page url
});

1

Jika Anda perlu mengakses url saat ini, biasanya Anda harus menunggu NavigationEnd atau NavigationStart untuk melakukan sesuatu. Jika Anda hanya berlangganan acara router, langganan akan menampilkan banyak acara dalam siklus hidup rute. Sebagai gantinya, gunakan operator RxJS untuk memfilter acara yang Anda butuhkan saja. Efek samping yang menguntungkan dari ini sekarang kita memiliki jenis yang lebih ketat!

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


1

Saya menghadapi masalah ketika saya membutuhkan jalur URL ketika pengguna menavigasi melalui aplikasi atau mengakses URL (atau menyegarkan pada URL tertentu) untuk menampilkan komponen anak berdasarkan URL.

Lebih lanjut, saya ingin sebuah Observable yang dapat dikonsumsi dalam template, jadi router.url bukanlah suatu pilihan. Juga router.events berlangganan karena perutean dipecat sebelum templat komponen diinisialisasi.

this.currentRouteURL$ = this.router.events.pipe(
     startWith(this.router),
     filter(
         (event) => event instanceof NavigationEnd || event instanceof Router
     ),
     map((event: NavigationEnd | Router) => event.url)
);

Semoga ini bisa membantu, semoga berhasil!


1
Ini luar biasa.
codeepic
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.