Angularnál hogyan lehet ezeket megcsinálni?
Van egy select html input, amikor változás történik a (chage)-el meghív egy anguláros typescript függvényt, amiben többek között ezzel a kóddal egy másik URL-re megy.
Ilyenkor X komponensről át megy Y komponensre. Tehát a routing úgy van beállítva, hogy az Y komponens kezelje.
this.router.navigateByUrl(`/search/${Value}`);
Az "value" egy paraméterben át adott változó.
Ezek után meg egy serviceben az Y komponenből meghívódik egy függvény, ami egy API kérést ad le.
Amikor ez előszőr meghívódik, minden tökéletesen működik. Elnavigál a .../search/ideazadottkeyword URL-re és megjeleníti a tartalmat, amit kell.
Ezen az URL-en is látható ez a select tag és ha ezen a ponton kiválasztok egy értéket, akkor már nem navigál át a megfelelő linkre. Be írja az URL-be , hogy .../search/aMegfelelőÉrték , de nem navigál át, csak ha felkattintot a browse URL-t mutató részre és nyomok egy entert.
A consolra kiírt értékek, alapján pedig eljuk this.router.navigateByUrl(`/search/${Value}`);-részre és az URL-be is beíródik minden az ablak felső részében, de ténylegen nem megy át a másik komponensre.
Erre akárki tud valamilyen megoldást, hogy mért nem teszi?
válasza:Huh elég zavaros a kérdés, de ha jól veszem ki, akkor adatot akarsz átvinni egyik komponensből a másikba, miután átnavigáltál egy másik oldalra?
Most vagy az lehet a megoldás, hogy egy service-en keresztül küldesz adatot, például egy BehaviorSubject-tel megosztozol a két komponens között.
Vagy a másik, hogy úgy emlékszek, hogy routing-gal együtt is lehet adatot küldeni, és a cél komponensben megjelenik az adat, amikor a komponens betöltődik.
De szerintem egyszerűbben is meg lehet ezt oldani, csak nem tudom pontosan mit szeretnél.
válasza:Adatot így tudsz átküldeni routinggal:
TS-ben:
this.router.navigate(['action-selection'], { state: { example: 'bar' } });
A fogadó oldalon TS-ben pedig:
constructor(private router: Router) {
console.log(this.router.getCurrentNavigation().extras.state.example); // should log out 'bar'
}
Innen származik a kód:
Köszi, pont pár perce találtam meg a megoldást.
Nem akartam részletekbe menni a probléma körbeírásánál, csak a konkrétumokat próbáltam leírni, de az volt, hogy van egy select html tag, ahol kerületek között lehet választani és mellette egy textbox ahol meglehet adni egy szöveget és emellett egy search gomb, amire rákattintva az inputok alapján keres.
A keresés meg úgy van, hogy elnavigál a .../search/ideakategória/ideakulcsszó URL-re amivel a dolgokat kilistázó komponens foglalkozik.
A route így nézki:
{ path: 'search/:keyword/:district', component: PropertyListComponent },
Erre a hívás meg így:
this.router.navigateByUrl(`/search/${addressValue}/${districtValue}`);
Ez első alkalommal tökéletesen működött.
Pl.: V. kerület kiválasztásával és a "Markó" szó megadásával kidoba az V. kerületben a Markó utcai lakásokat.
Ebben az esetben az URL így nézett ki:
" http://localhost:4200/search/marko/V"
Ezen a ponton ha egy új keresést akartam csinálni, mondjuk VIII. kerület, Bródy Sándor utcában, akkor az URL-t átírta a keresés gombra kattintás után erre:
" http://localhost:4200/search/br%C3%B3dy%20s%C3%A1ndor/VIII"
De a listázást kezelő komponensre nem navigált át, tehát az oldalon nem történt változás.
Ezt nem értettem hogy lehetséges.
Végül az volt a megodlás, hogy a keresésért felelős komponens konstruktorát átírtam erre:
constructor(private router: Router) {
this.router.routeReuseStrategy.shouldReuseRoute = function () {
return false;
}
}
Most már jól működik.
Esetleg ha idáig elolvastad és érted mi van a konstruktorban még leírhatnád, hogy mi volt a problémám és ez a kód részlet mért oldotta meg, mert csak felületesen értem.
Köszi.
válasza:Kapcsolódó kérdések:
Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!