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?
sumber
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'
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';
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 Location
ke komponen Anda dan baca location.path();
Anda harus menambahkan Anda perlu menambahkan ROUTER_DIRECTIVES
suatu tempat sehingga Angular dapat menyelesaikannya Location
. import: [RouterModule]
ke modul.
Memperbarui
Di router V3 (RC.3) Anda dapat menyuntikkan ActivatedRoute
dan mengakses lebih banyak detail menggunakan snapshot
propertinya.
constructor(private route:ActivatedRoute) {
console.log(route);
}
atau
constructor(private router:Router) {
router.events.subscribe(...);
}
Lihat juga Pendengar peristiwa router 2 sudut
navigate
metode bersama dengan (ditambahkan) nama rute anak yang ingin saya navigasikan.
MyTrackingService
dijelaskan di stackoverflow.com/a/34548656/217408 akan memungkinkan untuk mengakses nilai-nilai ini.
canActivate()
metode, sehingga saya bisa mengarahkan ulang ke halaman "login", dan kemudian mengarahkan kembali ke rute asli setelah pengguna mengautentikasi?
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.ts
impor
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:
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);
}
}
);
window
Objek 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 data
adalah objek dan kita perlu url
properti 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 ActivatedRoute
untuk 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
url
sekarang bukan lagi URL dan string, tetapi a ComponentInstruction
.
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 UrlTree
dari 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, router
adalah contoh dariActivatedRoute
router.events.subscribe(e => {
if (e instanceof NavigationEnd) {
this.currentUrl = e.url;
}
});
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!
window.location.pathname
window.location
adalah bahwa jika di masa depan, mereka ingin mengimplementasikan rendering sisi server, mereka akan menghadapi beberapa kesulitan karenawindow
tidak 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.