137. Fetching Route Parameters

Jul 15, 2026 05:33 · 4:01 · English · Whisper Turbo · 1 Høgtalar

Denne utskrifta utgår i dag. Oppgrader til permanent lagring →

Forelesningsindeks

0:02

S… Speaker 1 (137. Fetching Route Parameters)

In the last lecture,

0:03

S… Speaker 1 (137. Fetching Route Parameters)

we created our route with a dynamic path segment.

0:06

S… Speaker 1 (137. Fetching Route Parameters)

Now we want to get access to the data the user sent us,

0:10

S… Speaker 1 (137. Fetching Route Parameters)

or which is encoded in the URL,

0:12

S… Speaker 1 (137. Fetching Route Parameters)

I should say.

0:13

S… Speaker 1 (137. Fetching Route Parameters)

So we know that we will load the user component,

0:16

S… Speaker 1 (137. Fetching Route Parameters)

user component,

0:17

S… Speaker 1 (137. Fetching Route Parameters)

this one here,

0:17

S… Speaker 1 (137. Fetching Route Parameters)

and we know that there will be some data in the URL for us.

0:21

S… Speaker 1 (137. Fetching Route Parameters)

How can we get access to it?

0:24

S… Speaker 1 (137. Fetching Route Parameters)

Well, it is in the TypeScript file where we can get access.

0:27

S… Speaker 1 (137. Fetching Route Parameters)

And there,

0:28

S… Speaker 1 (137. Fetching Route Parameters)

we need to inject something we already injected before.

0:30

S… Speaker 1 (137. Fetching Route Parameters)

The active route.

0:33

S… Speaker 1 (137. Fetching Route Parameters)

So this is again on activated route.

0:35

S… Speaker 1 (137. Fetching Route Parameters)

So make sure to use this type and import it from at Angular Router.

0:39

S… Speaker 1 (137. Fetching Route Parameters)

And by injecting this,

0:41

S… Speaker 1 (137. Fetching Route Parameters)

we get access to the currently loaded route.

0:43

S… Speaker 1 (137. Fetching Route Parameters)

Now I told you that this currently loaded route is a JavaScript

0:47

S… Speaker 1 (137. Fetching Route Parameters)

object with a lot of metadata about this currently loaded route.

0:51

S… Speaker 1 (137. Fetching Route Parameters)

One of the important pieces of information is the currently active user.

0:56

S… Speaker 1 (137. Fetching Route Parameters)

Now you'll see that in this user component,

0:58

S… Speaker 1 (137. Fetching Route Parameters)

I already defined a user object at the top,

1:01

S… Speaker 1 (137. Fetching Route Parameters)

which is undefined for now.

1:02

S… Speaker 1 (137. Fetching Route Parameters)

It should have the following structure and it's not used right now.

1:07

S… Speaker 1 (137. Fetching Route Parameters)

But we could load our user by simply,

1:10

S… Speaker 1 (137. Fetching Route Parameters)

well,

1:11

S… Speaker 1 (137. Fetching Route Parameters)

getting access or retrieving this parameter from our

1:16

S… Speaker 1 (137. Fetching Route Parameters)

URL.

1:17

S… Speaker 1 (137. Fetching Route Parameters)

So it would be nice if,

1:18

S… Speaker 1 (137. Fetching Route Parameters)

let's say, in ngOnInit,

1:19

S… Speaker 1 (137. Fetching Route Parameters)

when our component gets initialized,

1:22

S… Speaker 1 (137. Fetching Route Parameters)

we get our user.

1:24

S… Speaker 1 (137. Fetching Route Parameters)

So we maybe want to say this user equals,

1:29

S… Speaker 1 (137. Fetching Route Parameters)

and now we assign it to a JavaScript object because

1:33

S… Speaker 1 (137. Fetching Route Parameters)

that is the type of it,

1:35

S… Speaker 1 (137. Fetching Route Parameters)

a JavaScript object with an ID and with a name.

1:39

S… Speaker 1 (137. Fetching Route Parameters)

Now the value for the ID can be fetched from our route,

1:43

S… Speaker 1 (137. Fetching Route Parameters)

and there we have a snapshot property,

1:46

S… Speaker 1 (137. Fetching Route Parameters)

and on this snapshot of our currently active route,

1:49

S… Speaker 1 (137. Fetching Route Parameters)

we have a params JavaScript object,

1:53

S… Speaker 1 (137. Fetching Route Parameters)

and here we can get our ID.

1:56

S… Speaker 1 (137. Fetching Route Parameters)

And now you will only have access to properties here,

2:00

S… Speaker 1 (137. Fetching Route Parameters)

well,

2:00

S… Speaker 1 (137. Fetching Route Parameters)

which you defined in your route parameters.

2:03

S… Speaker 1 (137. Fetching Route Parameters)

So this

2:06

S… Speaker 1 (137. Fetching Route Parameters)

Part here we named it ID here so we can retrieve

2:10

S… Speaker 1 (137. Fetching Route Parameters)

the ID from this params object here Now the

2:14

S… Speaker 1 (137. Fetching Route Parameters)

name is something which is not encoded in the route right now.

2:18

S… Speaker 1 (137. Fetching Route Parameters)

So maybe we should do this too.

2:19

S… Speaker 1 (137. Fetching Route Parameters)

Let's go to app module and Let's simply add another

2:23

S… Speaker 1 (137. Fetching Route Parameters)

dynamic part here dot a colon name Now

2:28

S… Speaker 1 (137. Fetching Route Parameters)

we also will get this as a parameter so we can retrieve it

2:32

S… Speaker 1 (137. Fetching Route Parameters)

the same way we retrieve the ID

2:35

S… Speaker 1 (137. Fetching Route Parameters)

Let's retrieve the name.

2:36

S… Speaker 1 (137. Fetching Route Parameters)

And it's in the same params object because this is all part of the route

2:40

S… Speaker 1 (137. Fetching Route Parameters)

which was loaded due to this path we set up in app module being

2:44

S… Speaker 1 (137. Fetching Route Parameters)

triggered, which holds two dynamic pieces.

2:48

S… Speaker 1 (137. Fetching Route Parameters)

And you can add as many parameters here as you want.

2:51

S… Speaker 1 (137. Fetching Route Parameters)

They will all be retrievable on this params object of the loaded route.

2:55

S… Speaker 1 (137. Fetching Route Parameters)

With that,

2:56

S… Speaker 1 (137. Fetching Route Parameters)

we assign something to our user.

2:58

S… Speaker 1 (137. Fetching Route Parameters)

Now we could go to our HTML document and output that

3:02

S… Speaker 1 (137. Fetching Route Parameters)

data.

3:03

S… Speaker 1 (137. Fetching Route Parameters)

So with string interpolation,

3:04

S… Speaker 1 (137. Fetching Route Parameters)

here we could output user ID.

3:06

S… Speaker 1 (137. Fetching Route Parameters)

It will now be set,

3:08

S… Speaker 1 (137. Fetching Route Parameters)

we know that.

3:09

S… Speaker 1 (137. Fetching Route Parameters)

And user name maybe.

3:11

S… Speaker 1 (137. Fetching Route Parameters)

Both will be available because we set it in NG on init.

3:14

S… Speaker 1 (137. Fetching Route Parameters)

Now this should work,

3:17

S… Speaker 1 (137. Fetching Route Parameters)

so if we save this.

3:19

S… Speaker 1 (137. Fetching Route Parameters)

and we target slash users one,

3:22

S… Speaker 1 (137. Fetching Route Parameters)

max maybe,

3:24

S… Speaker 1 (137. Fetching Route Parameters)

so that we have both the ID and the name,

3:26

S… Speaker 1 (137. Fetching Route Parameters)

and we hit enter.

3:28

S… Speaker 1 (137. Fetching Route Parameters)

We correctly see id1,

3:30

S… Speaker 1 (137. Fetching Route Parameters)

name max.

3:31

S… Speaker 1 (137. Fetching Route Parameters)

If we change the id to 3,

3:32

S… Speaker 1 (137. Fetching Route Parameters)

we see id3 here.

3:35

S… Speaker 1 (137. Fetching Route Parameters)

So this seems to work and you even see that

3:39

S… Speaker 1 (137. Fetching Route Parameters)

this is still marked as active because this currently active path

3:43

S… Speaker 1 (137. Fetching Route Parameters)

still contains slash users,

3:45

S… Speaker 1 (137. Fetching Route Parameters)

which was the route for this link.

3:47

S… Speaker 1 (137. Fetching Route Parameters)

So this router link active directive is still doing its job.

3:50

S… Speaker 1 (137. Fetching Route Parameters)

Now this seems to be working fine.

3:52

S… Speaker 1 (137. Fetching Route Parameters)

Now let me add something to it which will break it though.

3:57

S… Speaker 1 (137. Fetching Route Parameters)

I'll do this in the next lecture.

Denne transkripsjonen er laga av AI (automatisk talegjenkjenning). Kan innehalda feil – sjekk mot originallyden for kritisk bruk. AI-regel

Elskar du STT.ai? Fortel det til vennene dine!

Samandrag

Trykk på Oppsummer for å laga eit AI- samandrag av denne transkripsjonen.

Spør AI om denne transkripsjonen

Spør noko om denne transkripsjonen — AI vil finne relevante delar og svare.

Omskriv ei anna