Opsætning af Routing i Angular
For at få det hele til at fungere, skal du fortælle Angular, hvilken URL der viser hvilken komponent. Dette kaldes routing.
Hovedroutingfilen
Når du opretter en Angular-app ved hjælp af CLI, kan du aktivere routing fra starten — svar blot "Yes", når du bliver spurgt om routing. Angular opretter derefter de nødvendige filer for dig (hvilket vi allerede gjorde, da vi oprettede appen). En af disse filer er app.routes.ts.
Hvis du af en eller anden grund ikke har denne fil, skal du ikke bekymre dig — du kan selv oprette den i rodmappen af dit projekt. Den skal se sådan ud:
routes.ts
Denne fil informerer Angular om, hvilke ruter der findes i din app, og hvilke komponenter der skal vises for hver rute.
Sørg også for, at dine ruter er forbundet i app.config.ts på denne måde:
config.ts
Uden linjen provideRouter(routes) vil Angular ikke kende til dine ruter, selvom de er defineret i app.routes.ts.
Konfiguration af ruter
Lad os nu tilføje ruter til vores Task Tracker-app. Åbn app.routes.ts og indsæt følgende kode:
routes.ts
Dette er blot et array af ruter, som vi eksporterer. Hver rute er et objekt med følgende indstillinger:
-
path— URL-stien; -
component— den komponent, der vises, når man navigerer til den pågældende sti.
I vores tilfælde har vi to ruter:
Hovedsiden, der viser listen over opgaver.
routes.ts
Når en bruger besøger rod-URL'en (localhost:4200/), vil Angular vise TaskListComponent.
Opgavedetaljeside, der viser information om en enkelt opgave:
routes.ts
Her er :id en dynamisk parameter. Angular forstår, at :id kan være en hvilken som helst værdi (som /task/1, /task/42 osv.). Denne værdi sendes automatisk til TaskDetailsComponent, og du kan bruge den til at hente data for den specifikke opgave.
Så når en bruger går til localhost:4200/task/1, vil Angular vise TaskDetailsComponent med detaljerne for task №1.
Lige nu vil intet fungere endnu, fordi vi kun har defineret ruterne, men vi har ikke forbundet dem fuldt ud til vores komponenter. Lad os gøre det i næste kapitel!
Tak for dine kommentarer!
Spørg AI
Spørg AI
Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat
Awesome!
Completion rate improved to 3.13Opsætning af Routing i Angular
Stryg for at vise menuen
For at få det hele til at fungere, skal du fortælle Angular, hvilken URL der viser hvilken komponent. Dette kaldes routing.
Hovedroutingfilen
Når du opretter en Angular-app ved hjælp af CLI, kan du aktivere routing fra starten — svar blot "Yes", når du bliver spurgt om routing. Angular opretter derefter de nødvendige filer for dig (hvilket vi allerede gjorde, da vi oprettede appen). En af disse filer er app.routes.ts.
Hvis du af en eller anden grund ikke har denne fil, skal du ikke bekymre dig — du kan selv oprette den i rodmappen af dit projekt. Den skal se sådan ud:
routes.ts
Denne fil informerer Angular om, hvilke ruter der findes i din app, og hvilke komponenter der skal vises for hver rute.
Sørg også for, at dine ruter er forbundet i app.config.ts på denne måde:
config.ts
Uden linjen provideRouter(routes) vil Angular ikke kende til dine ruter, selvom de er defineret i app.routes.ts.
Konfiguration af ruter
Lad os nu tilføje ruter til vores Task Tracker-app. Åbn app.routes.ts og indsæt følgende kode:
routes.ts
Dette er blot et array af ruter, som vi eksporterer. Hver rute er et objekt med følgende indstillinger:
-
path— URL-stien; -
component— den komponent, der vises, når man navigerer til den pågældende sti.
I vores tilfælde har vi to ruter:
Hovedsiden, der viser listen over opgaver.
routes.ts
Når en bruger besøger rod-URL'en (localhost:4200/), vil Angular vise TaskListComponent.
Opgavedetaljeside, der viser information om en enkelt opgave:
routes.ts
Her er :id en dynamisk parameter. Angular forstår, at :id kan være en hvilken som helst værdi (som /task/1, /task/42 osv.). Denne værdi sendes automatisk til TaskDetailsComponent, og du kan bruge den til at hente data for den specifikke opgave.
Så når en bruger går til localhost:4200/task/1, vil Angular vise TaskDetailsComponent med detaljerne for task №1.
Lige nu vil intet fungere endnu, fordi vi kun har defineret ruterne, men vi har ikke forbundet dem fuldt ud til vores komponenter. Lad os gøre det i næste kapitel!
Tak for dine kommentarer!
