Weboldal keresés

angular - a routerLink paraméterekkel megváltoztatja az URL-t, de nem navigál vagy tölti újra a komponenst

Már megnéztem a kapcsolódó kérdést router.navigate megváltoztatja az URL-t, de nem rendereli az komponenst, de ugyanaz a helyzet ugyanazt az eredményt okozza.

Van egy útvonalam az útvonalak modulomban:

        {
            path: "competition/details",
            loadChildren: "../pages/competitions/competitions-details/competitions-details.module#CompetitionsDetailsModule"
        }

Az az oldal ("competition-details") rendereli az elememet:

<standings-regular></standings-regular>

Aztán a komponensben ellenőrzöm a 2 opcionális paramétert:

    this.competitionId = this.activatedRoute.snapshot.params.competition;
    this.condition = this.activatedRoute.snapshot.params.condition;

És végül ezeket a paramétereket, a "competition"-t és a "condition"-t arra használom, hogy egy tömböt építsek. Eddig minden működik, ha az URL-t közvetlenül a böngészőbe írom:

pl.: http://localhost:4200/competition/details;competition=219;condition=home

Most ez alapvetően a versenyhez tartozó ugyanazon táblázat különböző nézeteit képviseli, egy kis kontextus kedvéért.

http://localhost:4200/competition/details;competition=219;condition=home az állástáblázatot jeleníti meg minden csapat számára a 219-es versenyből, csak az otthoni mérkőzésekkel.

http://localhost:4200/competition/details;competition=219 létrehozza a táblázatot az összes 219-es verseny mérkőzéseivel.

Tehát szeretnék egy hivatkozást ugyanabban a táblázatban, hogy az új URL-re navigáljak, de amikor megpróbálom, csak a böngésző URL-je változik, a nézet azonban nem változik.

Így próbálok navigálni:

        <ul class="dropdown-menu btn-primary dropdown-menu-right">
            <li>
                <a md-ripple [routerLink]="['/competition/details', {competition: '219'}]">Completa</a>
            </li>
            <li>
                <a md-ripple [routerLink]="['/competition/details', {competition: '219', condition: 'home'}]">Home Only</a>
            </li>
        </ul>

Megpróbáltam itt a routerLink-et egy (click)="" eseménnyel lecserélni, ami egy komponenst metódust hív meg a navigáláshoz, de az eredmény ugyanaz volt: a böngésző URL-je változik, de semmi nem történik.

Mind a router.navigate(), mind a router.navigateByUrl() függvényt kipróbáltam

Valami gondolat?

Válasz #1

Ahelyett, hogy a paraméter értékeit a „snapshot.params”-ből vennéd, fel kell iratkoznod az activatedRoute-ra az alábbiak szerint.

import { ActivatedRoute, Router, ParamMap } from "@angular/router";

tedd ezt a kódot a ngOnInit() függvényedbe

this.activatedRoute.paramMap.subscribe((params: ParamMap) => {
    this.competitionId = params.get('competitionId ');
    let condition = params.get('condition ');
    //business logic what changes you want on the page with this new data.
});

Pillanatkép alapján az újratöltés nem történik meg, amikor útvonalparamétereket változtatunk az URL-ben, mert a konstruktor nem hívódik meg. De feliratkozás használatával figyelni fogja a paraméterekben bekövetkező változásokat.

Kapcsolódó cikkek