Angular 2'de yeniden yüklemeden rota parametrelerini değiştirin

Angular 2, Google Maps, vb. Kullanarak bir emlak web sitesi yapıyorum ve bir kullanıcı haritanın merkezini değiştirdiğinde, haritanın mevcut konumunu ve yarıçapı gösteren API'de bir arama gerçekleştiriyorum. Mesele şu ki, bu değerleri tüm sayfayı yeniden yüklemeden url'de yansıtmak istiyorum. Mümkün mü? AngularJS 1.x kullanarak bazı çözümler buldum, ancak Angular 2 hakkında hiçbir şey bulamadım.

location.go(url)Uygulama yolunda değişiklik yapmadan temelde URL'nizi değiştirecek olanı kullanabilirsiniz .

NOT bu, geçerli rotadan alt rotaya yeniden yönlendirme gibi başka etkilere neden olabilir.

İlgili soru açıklarlocation.goiçin intimate olmazRouterdeğişiklikleri gerçekleşmesi.

RC6'dan itibaren, URL'yi değiştirmeden değiştirmek ve böylece rota geçmişinizi saklamak için aşağıdakileri yapabilirsiniz.

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

Kullanmak location.go(url)gitmenin yoludur, ancak url'yi kodlamak yerine kullanarak oluşturmayı düşünün router.createUrlTree().

Aşağıdaki yönlendirici çağrısını yapmak istediğiniz göz önüne alındığında: this.router.navigate([{param: 1}], {relativeTo: this.activatedRoute})ancak bileşeni yeniden yüklemeden, şu şekilde yeniden yazılabilir:

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

 this.location.go(url);

Benim gibi bu soruyu bulan biri için aşağıdakiler yararlı olabilir.

Benzer bir sorun yaşadım ve ilk olarak location.go ve location.replaceState'i buradaki diğer yanıtlarda önerildiği gibi kullanmayı denedim. Ancak uygulamada başka bir sayfaya gitmem gerektiğinde sorunlarla karşılaştım çünkü navigasyon mevcut rotaya göreydi ve mevcut rota location.go veya location.replaceState ile güncellenmiyordu (yönlendirici hiçbir şey bilmiyor bunların URL'ye ne yaptığı hakkında)

Esasen, rota parametresi değiştiğinde DIDN'T'nin sayfayı / bileşeni yeniden yüklemesini ancak DID'nin rota durumunu dahili olarak güncellemesi gereken bir çözüme ihtiyacım vardı.

Sorgu parametrelerini kullanmayı bıraktım. Bununla ilgili daha fazla bilgiyi burada bulabilirsiniz: https://angular-2-training-book.rangle.io/handout/routing/query_params.html

Dolayısıyla, bir siparişi kaydetmek ve bir sipariş kimliği almak gibi bir şey yapmanız gerekirse, sayfa URL'nizi aşağıda gösterildiği gibi güncelleyebilirsiniz. Bir merkez konumunu ve bir harita üzerindeki ilgili verileri güncellemek benzer olacaktır.

// 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.
}

ve aşağıdaki gibi ngOnInit yöntemi içinde takip edersiniz:

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

Yeni (kaydedilmemiş) bir siparişle doğrudan sipariş sayfasına gitmeniz gerekiyorsa şunları yapabilirsiniz:

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

Veya mevcut (kaydedilmiş) bir sipariş için doğrudan sipariş sayfasına gitmeniz gerekiyorsa şunları yapabilirsiniz:

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

Angular2'nin RCx sürümlerinde bunu çalıştırmakta büyük sorun yaşadım. Location paketi taşındı ve constructor () içindeki location.go () işlevini çalıştırmak çalışmayacak. Yaşam döngüsünde ngOnInit () veya daha sonra olması gerekir. İşte bazı örnek kod:

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

Konuyla ilgili açısal kaynaklar şunlardır: https://angular.io/docs/ts/latest/api/common/index/Location-class.html https://angular.io/docs/ts/latest/api/ ortak / index / LocationStrategy-class.html

Bunu elde etmek için bu yolu kullanıyorum:

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

-- DÜZENLE --

Bunun için biraz daha bilgi eklemem gerektiğini düşünüyorum.

this.location.replaceState()Uygulamanızın yönlendiricisini kullanırsanız güncellenmez, bu nedenle yönlendirici bilgilerini daha sonra kullanırsanız, tarayıcınızda bununla aynı değildir. Örneğin localizeService, dili değiştirmek için kullanırsanız , dili değiştirdikten sonra uygulamanızı ile değiştirmeden önce bulunduğunuz son URL'ye geri dönün this.location.replaceState().

Bu davranışı istemiyorsanız, güncelleme URL'si için farklı bir yöntem seçebilirsiniz, örneğin:

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

Bu seçenekte tarayıcınız da yenilenmez ancak URLdeğişikliğiniz uygulamanıza da eklenir Router, böylece dili değiştirdiğinizde dilinde olduğu gibi sorun yaşamazsınız this.location.replaceState().

Elbette ihtiyaçlarınız için yöntem seçebilirsiniz. İlki daha hafiftir çünkü uygulamanızı URLtarayıcıdaki değişiklikten daha fazla kullanmazsınız .

Benim için aslında Angular 4.4.5 ile ikisinin bir karışımıydı.

Router.navigate kullanımı, realtiveTo: enabledRoute kısmına saygı göstermeyerek url'mi yok etmeye devam etti.

Şununla bitirdim:

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

URL'yi değiştirirken queryParamsHandling: 'merge' özelliğini kullanın.

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