Askartelin äskettäin pienen Angular-sivustoprojektin parissa. Eräs projektin vaatimuksista oli, että sivustosta pitäisi pystyä näyttämään kaksi erilaista versiota, joista toinen näytetään vain kun käyttäjä saapuu sivulle linkillä, jossa on country=usa -parametri.

Kuten moni varmasti tietää, navigointi sivulta toiselle hoituu routerin navigate()-funktion avulla esim. näin:

this.router.navigate(['/thingsOfInterest']);

Aloitin homman siten, että poimin maa-parametrin ensin talteen URLista, jotta sain latattua käyttäjälle taustalta oikeat datat:

this.activatedRoute.queryParams.subscribe(params => {
      const countryParam = params['country'];
      ...
});

Tämän jälkeen tuuppasin käyttäjän oikeaan suuntaan antamalla navigate-funktioon parametrina queryParams-objektin, joka sisältää URLiin lisättävän parametrin ja sen arvon. Halusin säilyttää parametrin tallessa siltä varalta että käyttäjä sattuisi vaikkapa painamaan refreshiä.

this.router.navigate(['/thingsOfInterest'], { 
    queryParams: { 
        country: countryParam
    }
});

Jos countryParam-muuttujan arvo olisi esim. fr, olisi lopputulemana seuraavanlainen URL:

https://example.com/thingsOfInterest?country=fr

Oletusarvoisesti URL-parametrit kuitenkin hukkuvat seuraavan kerran navigoitaessa johonkin suuntaan, mutta tähän voi vaikuttaa queryParamsHandling-parametrilla. Kun queryParams-objektiin lisätään tämä parametri arvolla merge, kaikki URL-parametrit yhdistetään ja otetaan talteen:

this.router.navigate(['/thingsOfInterest'], {
    queryParams: {
        country: countryParam 
    }, 
    queryParamsHandling: "merge",
});

Joskus navigoitaessa voi kuitenkin mukaan tarttua hankala parametri, josta olisi mukava päästä eroon mahdollisimman pienellä vaivalla. Yksi kätevä tapa tähän on antaa kyseiselle, kiusalliselle parametrille arvoksi null queryParams-objektissa. Näin kyseinen parametri katoaa, mutta muut säilyvät menossa mukana:

this.router.navigate(['/thingsOfInterest'], {
    queryParams: { 
        country: null 
    }, 
    queryParamsHandling: "merge" 
});