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