Ubah parameter rute tanpa memuat ulang di Angular 2

Saya membuat situs web real estat menggunakan Angular 2, Google Maps, dll. Dan ketika pengguna mengubah pusat peta, saya melakukan penelusuran ke API yang menunjukkan posisi peta saat ini serta radiusnya. Masalahnya, saya ingin mencerminkan nilai-nilai itu di url tanpa memuat ulang seluruh halaman. Apakah itu mungkin? Saya telah menemukan beberapa solusi menggunakan AngularJS 1.x tetapi tidak ada tentang Angular 2.

Anda dapat menggunakan location.go(url)yang pada dasarnya akan mengubah url Anda, tanpa mengubah rute aplikasi.

CATATAN ini dapat menyebabkan efek lain seperti pengalihan ke rute anak dari rute saat ini.

Pertanyaan terkait yang menjelaskanlocation.gotidak akan intimRoutersampai terjadi perubahan.

Pada RC6 Anda dapat melakukan hal berikut untuk mengubah URL tanpa mengubah status dan dengan demikian menyimpan riwayat rute Anda

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

    import {Location} from '@angular/common'; 
    // If you dont import this angular will import the wrong "Location"

    @Component({
        selector: 'example-component',
        templateUrl: 'xxx.html'
    })
    export class ExampleComponent implements OnInit {
        
        constructor( private location: Location )
        {}

        ngOnInit() {    
            this.location.replaceState("/some/newstate/");
        }
    }

Menggunakan location.go(url)adalah cara yang harus dilakukan, tetapi alih-alih melakukan hardcode url, pertimbangkan untuk membuatnya menggunakan router.createUrlTree().

Mengingat bahwa Anda ingin melakukan panggilan router berikut: this.router.navigate([{param: 1}], {relativeTo: this.activatedRoute})tetapi tanpa memuat ulang komponen, itu dapat ditulis ulang sebagai:

const url = this.router.createUrlTree([], {relativeTo: this.activatedRoute, queryParams: {param: 1}}).toString()

 this.location.go(url);

Bagi siapa pun seperti saya yang menemukan pertanyaan ini, berikut ini mungkin berguna.

Saya memiliki masalah serupa dan awalnya mencoba menggunakan location.go dan location.replaceState seperti yang disarankan dalam jawaban lain di sini. Namun saya mengalami masalah ketika saya harus menavigasi ke halaman lain di aplikasi karena navigasi relatif terhadap rute saat ini dan rute saat ini tidak diperbarui oleh location.go atau location.replaceState (router tidak tahu apa-apa tentang apa yang dilakukan ini pada URL)

Intinya saya membutuhkan solusi yang TIDAK memuat ulang halaman / komponen ketika parameter rute berubah tetapi DID memperbarui status rute secara internal.

Saya akhirnya menggunakan parameter kueri. Anda dapat menemukannya lebih lanjut di sini: https://angular-2-training-book.rangle.io/handout/routing/query_params.html

Jadi jika Anda perlu melakukan sesuatu seperti menyimpan pesanan dan mendapatkan ID pesanan, Anda dapat memperbarui URL halaman Anda seperti yang ditunjukkan di bawah ini. Memperbarui lokasi pusat dan data terkait pada peta akan serupa

// let's say we're saving an order. Initally the URL is just blah/orders
save(orderId) {
    // [Here we would call back-end to save the order in the database]

    this.router.navigate(['orders'], { queryParams: { id: orderId } });
    // now the URL is blah/orders?id:1234. We don't reload the orders
    // page or component so get desired behaviour of not seeing any 
    // flickers or resetting the page.
}

dan Anda terus melacaknya dalam metode ngOnInit seperti:

ngOnInit() {
    this.orderId = this.route
        .queryParamMap
        .map(params => params.get('id') || null);
    // orderID is up-to-date with what is saved in database now, or if
    // nothing is saved and hence no id query paramter the orderId variable
    // is simply null.
    // [You can load the order here from its ID if this suits your design]
}

Jika Anda perlu membuka halaman pesanan dengan pesanan baru (belum disimpan), Anda dapat melakukan:

this.router.navigate(['orders']);

Atau jika Anda perlu membuka halaman pesanan untuk pesanan yang sudah ada (tersimpan), Anda dapat melakukan:

this.router.navigate(['orders'], { queryParams: { id: '1234' } });

Saya mengalami kesulitan besar untuk membuatnya bekerja dalam rilis RCx angular2. Paket Lokasi telah dipindahkan, dan menjalankan location.go () di dalam konstruktor () tidak akan berfungsi. Ini harus ngOnInit () atau yang lebih baru dalam siklus proses. Berikut beberapa contoh kode:

import {OnInit} from '@angular/core';
import {Location} from '@angular/common';

@Component({
  selector: 'example-component',
  templateUrl: 'xxx.html'
})
export class ExampleComponent implements OnInit
{
  constructor( private location: Location )
  {}

  ngOnInit()
  {    
    this.location.go( '/example;example_param=917' );
  }
}

Berikut adalah sumber daya sudut tentang masalah tersebut: https://angular.io/docs/ts/latest/api/common/index/Location-class.html https://angular.io/docs/ts/latest/api/ common / index / LocationStrategy-class.html

Saya menggunakan cara ini untuk mendapatkannya:

const queryParamsObj = {foo: 1, bar: 2, andThis: 'text'};

this.location.replaceState(
  this.router.createUrlTree(
    [this.locationStrategy.path().split('?')[0]], // Get uri
    {queryParams: queryParamsObj} // Pass all parameters inside queryParamsObj
  ).toString()
);

- EDIT -

Saya pikir saya harus menambahkan beberapa informasi lagi untuk ini.

Jika Anda menggunakan this.location.replaceState()router aplikasi Anda tidak diperbarui, jadi jika Anda menggunakan informasi router nanti tidak sama untuk ini di browser Anda. Misalnya jika Anda menggunakan localizeServiceuntuk mengubah bahasa, setelah mengganti bahasa aplikasi Anda kembali ke URL terakhir di mana Anda sebelumnya mengubahnya dengan this.location.replaceState().

Jika Anda tidak menginginkan perilaku ini, Anda dapat memilih metode lain untuk memperbarui URL, seperti:

this.router.navigate(
  [this.locationStrategy.path().split('?')[0]],
  {queryParams: queryParamsObj}
);

Dalam opsi ini browser Anda juga tidak menyegarkan tetapi URLperubahan Anda juga disuntikkan ke Routerdalam aplikasi Anda, jadi ketika Anda mengganti bahasa Anda tidak memiliki masalah seperti dalam this.location.replaceState().

Tentu saja Anda dapat memilih metode untuk kebutuhan Anda. Yang pertama lebih ringan karena Anda tidak menggunakan aplikasi Anda lebih dari perubahan URLdi browser.

Bagi saya itu sebenarnya adalah campuran keduanya dengan Angular 4.4.5.

Menggunakan router.navigate terus merusak url saya dengan tidak menghormati bagian realtiveTo: activatedRoute.

Saya telah berakhir dengan:

this._location.go(this._router.createUrlTree([this._router.url], { queryParams: { profile: value.id } }).toString())

Gunakan atribut queryParamsHandling: 'merge' saat mengubah url.

this.router.navigate([], {
        queryParams: this.queryParams,
        queryParamsHandling: 'merge',
        replaceUrl: true,
});