Saya menggunakan angular 5.0.3, saya ingin memulai aplikasi saya dengan sekelompok parameter permintaan seperti /app?param1=hallo¶m2=123
. Setiap tip yang diberikan dalam Bagaimana cara mendapatkan kueri dari url di Angular 2? tidak bekerja untuk saya.
Adakah gagasan bagaimana agar parameter kueri berfungsi?
private getQueryParameter(key: string): string {
const parameters = new URLSearchParams(window.location.search);
return parameters.get(key);
}
Fungsi pribadi ini membantu saya untuk mendapatkan parameter saya, tapi saya rasa itu bukan cara yang tepat di lingkungan Angular baru.
[perbarui:] Aplikasi utama saya terlihat seperti
@Component({...})
export class AppComponent implements OnInit {
constructor(private route: ActivatedRoute) {}
ngOnInit(): void {
// would like to get query parameters here...
// this.route...
}
}
Jawaban:
Di Angular 5, params kueri diakses dengan berlangganan
this.route.queryParams
.Contoh:
/app?param1=hallo¶m2=123
sedangkan, variabel path diakses oleh
this.route.snapshot.params
Contoh:
/param1/:param1/param2/:param2
sumber
Ini solusi terbersih untuk saya
sumber
Saya tahu bahwa OP meminta solusi Angular 5, tetapi bagi Anda yang tersandung pada pertanyaan ini untuk versi Angular (6+) yang lebih baru. Mengutip Dokumen , mengenai ActivatedRoute.queryParams (yang menjadi dasar sebagian besar jawaban lain):
Menurut Documents , cara sederhana untuk mendapatkan params kueri akan terlihat seperti ini:
Untuk cara yang lebih lanjut (misalnya penggunaan ulang komponen lanjutan) lihat bab Documents ini .
EDIT:
Seperti yang dinyatakan dengan benar dalam komentar di bawah, jawaban ini salah - setidaknya untuk kasus yang ditentukan oleh OP.
OP meminta untuk mendapatkan parameter kueri global (/ app? Param1 = hallo & param2 = 123); dalam hal ini Anda harus menggunakan queryParamMap (sama seperti pada jawaban @ dapperdan1985).
paramMap, di sisi lain, digunakan pada parameter khusus untuk rute (misalnya / app /: param1 /: param2, menghasilkan / app / hallo / 123).
Terima kasih kepada @JasonRoyle dan @daka karena telah menunjukkannya.
sumber
queryParamMap
tidakparamMap
mengambil parameter string kueri?paramMap
tidak berfungsi.Anda juga dapat Menggunakan HttpParams , seperti:
sumber
path: '', redirectTo: '/list'
. The this.route.snapshot tidak berfungsi untuk saya karena redirectTo / daftar yang menghilangkan queryString 'lang'. Tetapi solusi ini bekerja untuk saya.MEMPERBARUI
sumber
ini bekerja untuk saya:
lihat lebih banyak opsi. Bagaimana cara mendapatkan permintaan dari url di angular2?
sumber
Params Kueri dan Path (Sudut 8)
Untuk url seperti https://myapp.com/user/666/read?age=23 gunakan
MEMPERBARUI
Dalam kasus ketika Anda menggunakan
this.router.navigate([someUrl]);
dan parameter kueri Anda tertanam dalamsomeUrl
string maka sudut menyandikan URL dan Anda mendapatkan sesuatu seperti ini https://myapp.com/user/666/read%3Fage%323 - dan solusi di atas akan memberikan hasil yang salah ( queryParams akan kosong, dan params jalur dapat direkatkan ke param path terakhir jika berada di ujung path). Dalam hal ini ubah cara navigasi ke inisumber
Tersandung di pertanyaan ini ketika saya sedang mencari solusi yang sama tetapi saya tidak memerlukan apa pun seperti perutean level aplikasi penuh atau lebih banyak modul yang diimpor.
Kode berikut berfungsi baik untuk saya gunakan dan tidak memerlukan modul atau impor tambahan.
http://localhost:4200/?param1=hello¶m2=123
output:sumber
Angular Router menyediakan metode parseUrl (url: string) yang mem-parsing url ke dalam UrlTree . Salah satu properti dari UrlTree adalah queryParams. Jadi Anda bisa melakukan sth seperti:
sumber
Sayangnya, solusi terbersih bukanlah solusi yang paling dapat dikembangkan. Dalam versi terbaru dari Angular, disarankan di jawaban lain bahwa Anda dapat dengan mudah mendapatkan parameter permintaan menggunakan ActivatedRoute Injectible dan secara khusus memanfaatkan properti snapshot:
atau properti berlangganan (digunakan dalam kasus di mana string kueri akan diperbarui, misalnya menavigasi melalui id pengguna):
Saya di sini untuk memberi tahu Anda bahwa solusi ini memiliki kelemahan menganga yang belum diselesaikan untuk beberapa waktu: https://github.com/angular/angular/issues/12157
Semua dalam semua, satu-satunya solusi bukti peluru adalah menggunakan javascript vanilla tua yang baik. Dalam hal ini, saya membuat layanan untuk manipulasi URL:
sumber
Ketika Anda memiliki objek rute kosong, ini terutama disebabkan oleh fakta bahwa Anda tidak menggunakan outlet router di app.component.html Anda.
Tanpa ini, Anda tidak akan bisa mendapatkan objek rute yang bermakna dengan subObject tidak kosong, terutama params & queryParams.
Coba tambahkan
<router-outlet><router-outlet>
sesaat sebelum menelepon<app-main-component></app-main-component>
Sebelum itu, pastikan Anda memiliki param kueri Anda siap dalam perutean aplikasi> yang mengekspor Rute kelas yang digunakan oleh komponen Aplikasi:
Hal terakhir tentu saja, untuk mendapatkan param Anda, saya menggunakan di
this.route.snapshot.params.dynamicParam
mana dynamicParam adalah nama yang digunakan dalam komponen perutean aplikasi Anda :)sumber
Hati-hati dengan rute Anda. "RedirectTo" akan menghapus | drop parameter kueri apa pun.
Saya menyebut komponen utama saya dengan parameter kueri seperti "/ main? Param1 = a & param2 = b dan menganggap bahwa parameter kueri saya tiba di metode" ngOnInit () "di komponen utama sebelum penerusan pengalihan berlaku.
Tapi ini salah. Redirect akan datang sebelumnya, membuang parameter kueri dan memanggil metode ngOnInit () di komponen utama tanpa parameter kueri.
Saya mengubah jalur ketiga dari rute saya ke
dan sekarang parameter kueri saya dapat diakses di komponen utama ngOnInit dan juga di PageOneComponent.
sumber
Ditemukan dalam: Komponen induk mendapat Params kosong dari ActivatedRoute
Bekerja untuk saya:
sumber
Hanya menemukan masalah yang sama dan sebagian besar jawaban di sini tampaknya hanya menyelesaikannya untuk routing internal Angular, dan kemudian beberapa dari mereka untuk parameter rute yang tidak sama dengan parameter permintaan.
Saya menduga bahwa saya memiliki kasus penggunaan yang mirip dengan pertanyaan asli oleh Lars.
Bagi saya kasus penggunaannya adalah misalnya pelacakan referensi:
Sudut berjalan
mycoolpage.com
, dengan perutean hash, jadimycoolpage.com
dialihkan kemycoolpage.com/#/
. Namun untuk rujukan, tautan sepertimycoolpage.com?referrer=foo
itu juga harus dapat digunakan. Sayangnya, Angular segera menghapus parameter permintaan, langsung kemycoolpage.com/#/
.Segala macam 'trik' dengan menggunakan komponen kosong + AuthGuard dan mendapatkan
queryParams
atauqueryParamMap
tidak, sayangnya, tidak berhasil untuk saya. Mereka selalu kosong.Solusi hacky saya akhirnya menangani ini dalam skrip kecil di
index.html
mana mendapatkan URL lengkap, dengan parameter permintaan. Saya kemudian mendapatkan nilai param permintaan melalui manipulasi string dan meletakkannya di objek jendela. Layanan terpisah kemudian menangani mendapatkan id dari objek jendela.skrip index.html
Layanan
sumber
sumber
http: // localhost: 4200 / produk? order = populer
Kami dapat mengakses param kueri pesanan seperti ini:
Ada juga queryParamMap, yang mengembalikan objek yang dapat diamati dengan paramMap.
Diberikan URL rute berikut:
http: // localhost: 4200 / produk? order = populer & filter = baru
Sumber - https://alligator.io/angular/query-parameters/
sumber
Di, saya pikir Angular 8:
ActivatedRoute.params
telah digantikan olehActivatedRoute.paramMap
ActivatedRoute.queryParams
telah digantikan olehActivatedRoute.queryParamMap
sumber
sumber
Jika Anda tidak menggunakan router Angular coba, querystring . Pasang itu
untuk proyek Anda. Dalam komponen Anda, lakukan sesuatu seperti ini
Ini
substring(1)
diperlukan karena jika Anda memiliki sesuatu seperti ini'/mypage?foo=bar'
maka nama kuncinya adalah?foo
sumber