Orqestria Letöltés
← Vissza a katalógushoz

Skill · 1.0.0 verzió

Angular-útvonalak és URL-állapot

Összehangolja a navigációt, rekordazonosítókat és szűrőket az újratölthető, megosztható böngészős URL-lel.

angular-router

Nézd meg, miben segít

Mikor hasznos?

Akkor használd, ha a Vissza gomb vagy rekordváltás után régi adatok maradnak a képernyőn.

Miben segít neked?

  • Újrafelhasznált komponensnél is reagál az útvonalparaméterek változására.
  • Az URL-ben őrzi a megfelelő szűrőket, lapozást és lapválasztást.
  • Kezeli a késleltetett útvonalakat és mentetlen adatokat, szerveroldali jogosultság mellett.

Például ezt kérheted

Javítsd az ügyféllistát, hogy a megosztott szűrők, Vissza–Előre navigáció és azonosítóváltás helyes adatokat mutasson. Nyiss szűrt hivatkozást új lapon, majd válts két ügyfél között. Az URL, az aktív szűrő és a megjelenített rekord maradjon összhangban.

Részletes dokumentáció

Itt a skill eredeti útmutatóját, példáit és ellenőrzési szempontjait olvashatod az eredeti nyelven.

Részletek…Összecsukás

Angular Router & URL State

Keep navigation, route parameters, query filters and lazy-loaded feature boundaries synchronized with the browser URL so deep links, reloads and Back/Forward navigation work reliably.

1. Route configuration and lazy loading

  • Organize routes along feature boundaries using loadComponent and loadChildren so heavy feature bundles load on demand.
  • Place feature-scoped services and stores in the route's providers: [...] array when their lifetime should match that route subtree.
  • Check whether withComponentInputBinding() is enabled in provideRouter(...): when enabled, route params, path data and query params bind directly to component @Input() / input() properties; otherwise, read them reactively from ActivatedRoute.

2. Reacting to same-component route and query parameter changes

  • Angular reuses the same component instance when only route params (:id) or query params (?page=2&q=foo) change on the same route configuration.
  • Never read route.snapshot.paramMap or route.snapshot.queryParamMap only once in ngOnInit when the user can navigate between items or filter states on the same route; subscribe to route.paramMap / route.queryParamMap (with switchMap to cancel stale loads) or use withComponentInputBinding() signal inputs.
  • Update URL filter/pagination/tab state with router.navigate([], { relativeTo: route, queryParams, queryParamsHandling: 'merge' }) so refresh and link sharing preserve the user's view.

3. Guards, resolvers and scroll/focus restoration

  • Prefer functional guards (CanActivateFn, CanDeactivateFn, CanMatchFn) returning a boolean | UrlTree (or Observable/Promise thereof) in modern Angular, matching the project's existing guard style.
  • Use CanDeactivateFn to protect unsaved form drafts from accidental navigation.
  • Treat client-side guards strictly as UX navigation flow: real authorization must always be enforced on the server.

Before you finish

  • Same-component parameter and query changes reload data reactively via paramMap/queryParamMap or route input bindings.
  • Direct URL entry, browser Back/Forward and page reload preserve expected state.
  • Guards return UrlTree redirects cleanly and are never treated as a substitute for server authorization.

Csomagban lévő fájlok 2

  • LICENSE.txt
  • SKILL.md

A skillcsomag bemutatása

angular-router

angular-router: Jól karbantartható Angular funkciókat készít világos komponenshatárokkal, reaktív állapottal, űrlapokkal és tesztelt migrációkkal.

Részletek…Összecsukás

angular-router

angular-router: Jól karbantartható Angular funkciókat készít világos komponenshatárokkal, reaktív állapottal, űrlapokkal és tesztelt migrációkkal.

A teljes skillt és a hozzá tartozó fájlokat tartalmazza (2 fájl). Az alábbi eredeti leírás rögzíti a pontos alkalmazási területét.

A skill eredeti leírása (a forrás nyelvén)

Use when configuring or debugging Angular Router routes, lazy loading (loadComponent, loadChildren), functional route guards and resolvers, route and query parameters, withComponentInputBinding, or URL-driven state.

Telepítsd a skillt, nézd át a forrását és a megbízhatósági beállításait, majd engedélyezd a megfelelő projektben vagy ügynöknél.

Előfeltételek

  • A számítógépedre telepített Orqestria.