Konfigurera Routing i Angular
För att allt ska fungera måste du tala om för Angular vilken URL som visar vilken komponent. Detta kallas routing. Låt oss börja!
Huvudfilen för routing
När du skapar en Angular-app med CLI kan du aktivera routing direkt från början — svara bara "Yes" när du får frågan om routing. Angular skapar då de nödvändiga filerna åt dig (vilket vi redan gjorde när vi skapade appen). En av dessa filer är app.routes.ts.
Om du av någon anledning inte har denna fil, oroa dig inte — du kan skapa den själv i projektets rotmapp. Den ska se ut så här:
routes.ts
Denna fil anger vilka rutter som finns i din app och vilka komponenter som ska visas för varje rutt.
Se även till att dina rutter är kopplade i app.config.ts på följande sätt:
config.ts
Utan raden provideRouter(routes) kommer Angular inte känna till dina rutter, även om de är definierade i app.routes.ts.
Konfigurera rutter
Nu ska vi lägga till rutter för vår Task Tracker-app. Öppna app.routes.ts och skriv följande kod:
routes.ts
Detta är bara en array av rutter som vi exporterar. Varje rutt är ett objekt med dessa inställningar:
-
path— URL-sökvägen; -
component— komponenten som visas när du navigerar till den sökvägen.
I vårt fall har vi två rutter:
Huvudsidan som visar listan över uppgifter.
routes.ts
När en användare besöker rotadressen (localhost:4200/), kommer Angular att visa TaskListComponent.
Sidan för uppgiftsdetaljer som visar information om en enskild uppgift:
routes.ts
Här är :id en dynamisk parameter. Angular förstår att :id kan vara vilket värde som helst (som /task/1, /task/42 osv.). Detta värde skickas automatiskt till TaskDetailsComponent, och du kan använda det för att hämta data för just den uppgiften.
Så när en användare går till localhost:4200/task/1 kommer Angular att visa TaskDetailsComponent med detaljer för uppgift nr 1.
Just nu fungerar ingenting ännu eftersom vi bara har definierat rutterna, men vi har inte kopplat dem helt till våra komponenter. Vi gör det i nästa kapitel!
Tack för dina kommentarer!
Fråga AI
Fråga AI
Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal
Awesome!
Completion rate improved to 3.13Konfigurera Routing i Angular
Svep för att visa menyn
För att allt ska fungera måste du tala om för Angular vilken URL som visar vilken komponent. Detta kallas routing. Låt oss börja!
Huvudfilen för routing
När du skapar en Angular-app med CLI kan du aktivera routing direkt från början — svara bara "Yes" när du får frågan om routing. Angular skapar då de nödvändiga filerna åt dig (vilket vi redan gjorde när vi skapade appen). En av dessa filer är app.routes.ts.
Om du av någon anledning inte har denna fil, oroa dig inte — du kan skapa den själv i projektets rotmapp. Den ska se ut så här:
routes.ts
Denna fil anger vilka rutter som finns i din app och vilka komponenter som ska visas för varje rutt.
Se även till att dina rutter är kopplade i app.config.ts på följande sätt:
config.ts
Utan raden provideRouter(routes) kommer Angular inte känna till dina rutter, även om de är definierade i app.routes.ts.
Konfigurera rutter
Nu ska vi lägga till rutter för vår Task Tracker-app. Öppna app.routes.ts och skriv följande kod:
routes.ts
Detta är bara en array av rutter som vi exporterar. Varje rutt är ett objekt med dessa inställningar:
-
path— URL-sökvägen; -
component— komponenten som visas när du navigerar till den sökvägen.
I vårt fall har vi två rutter:
Huvudsidan som visar listan över uppgifter.
routes.ts
När en användare besöker rotadressen (localhost:4200/), kommer Angular att visa TaskListComponent.
Sidan för uppgiftsdetaljer som visar information om en enskild uppgift:
routes.ts
Här är :id en dynamisk parameter. Angular förstår att :id kan vara vilket värde som helst (som /task/1, /task/42 osv.). Detta värde skickas automatiskt till TaskDetailsComponent, och du kan använda det för att hämta data för just den uppgiften.
Så när en användare går till localhost:4200/task/1 kommer Angular att visa TaskDetailsComponent med detaljer för uppgift nr 1.
Just nu fungerar ingenting ännu eftersom vi bara har definierat rutterna, men vi har inte kopplat dem helt till våra komponenter. Vi gör det i nästa kapitel!
Tack för dina kommentarer!
