Cara mendapatkan rute saat ini

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?

Router V3 baru memiliki properti url.

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

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

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

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

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

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

Untuk mendapatkan segmen rute:

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

constructor( route: ActivatedRoute) {}

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

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.

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

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

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

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

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

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.

sudut 2 rc2

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

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>

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.

Anda dapat menggunakan ActivatedRouteuntuk mendapatkan router saat ini

Jawaban Asli (untuk versi RC)

Saya menemukan solusi di AngularJS Google Group dan itu sangat mudah!

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

Inilah jawaban aslinya

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

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;

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

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;

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

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

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

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

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

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

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

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!