Orqestria Download
← Zurück zum Katalog

Skill · Version 1.0.0

Angular-Routing und URL-Zustand

Hält Navigation, Datensatzkennungen und Filter mit neu ladbaren und teilbaren Browser-URLs synchron.

angular-router

Entdecke, wie der Skill hilft

Wann ist der Skill hilfreich?

Nutze diesen Skill, wenn Zurücknavigation oder geänderte Kennungen veraltete Inhalte anzeigen.

Wobei hilft er dir?

  • Reagiert auf Parameteränderungen auch bei wiederverwendeten Komponenten.
  • Speichert passende Filter-, Seiten- und Tabzustände in URL-Parametern.
  • Behandelt verzögert geladene Routen und ungespeicherte Eingaben neben serverseitigen Rechten.

Das könntest du fragen

Korrigiere unsere Kundenliste für geteilte Filterlinks, Vorwärts- und Zurücknavigation sowie wechselnde Kundenkennungen. Öffne einen gefilterten Link in einem neuen Tab und wechsle zwischen zwei Kunden. URL, aktiver Filter und angezeigter Datensatz müssen zusammenpassen.

Ausführliche Dokumentation

Hier findest du die ursprüngliche Anleitung, Beispiele und Prüfschritte des Skills in ihrer Originalsprache.

Details…Weniger anzeigen

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.

Enthaltene Dateien 2

  • LICENSE.txt
  • SKILL.md

Über dieses Skill-Paket

angular-router

angular-router: Entwickelt wartbare Angular-Funktionen mit klaren Komponentengrenzen, reaktivem Zustand, Formularen und geprüften Migrationen.

Details…Weniger anzeigen

angular-router

angular-router: Entwickelt wartbare Angular-Funktionen mit klaren Komponentengrenzen, reaktivem Zustand, Formularen und geprüften Migrationen.

Enthält den vollständigen Skill und seine Begleitdateien (2 Dateien). Der genaue, ursprünglich verfasste Anwendungsbereich bleibt unten erhalten.

Ursprüngliche Skill-Beschreibung (Quellsprache)

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.

Installiere den Skill, prüfe seine Quelle und Vertrauenseinstellungen und aktiviere ihn für das passende Projekt oder den Agenten.

Voraussetzungen

  • Orqestria auf deinem Computer installiert.