141. Retrieving Query Parameters and Fragments

Jul 15, 2026 05:35 · 3:16 · English · Whisper Turbo · 1 _Gözleg

Bu transkripiň şu gün möhleti gutarýar. Daşyndan gaýd etmek üçin täzele →

Okap Bil

0:02

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

In the last lecture,

0:03

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

we learned how we can pass query parameters and fragments.

0:06

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

Now let's make sure we can also retrieve them.

0:08

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

So we're loading this added server component in the end.

0:12

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

So that is probably where we want to retrieve that information.

0:16

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

We can easily do this by going there,

0:18

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

edit server component,

0:20

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

and you see there already is a lot of code in there.

0:22

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

Well, everything what's happening here,

0:24

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

however, is it's using our service service to get

0:28

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

the server with the ID 1 and to be able to update it and

0:33

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

definitely dive into this service service file if

0:37

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

you want to learn more about what's happening here.

0:39

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

It's super simple,

0:40

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

though. We simply are able to get this array of servers,

0:43

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

get a single server.

0:44

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

or update a single server,

0:45

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

so overwrite it.

0:46

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

So that's not the interesting part.

0:48

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

The interesting part in the edit server component here is how we can

0:53

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

get access to our query parameter and the fragment.

0:55

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

We need our activated route for this.

0:58

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

So let's inject it just like we did before.

1:01

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

Activated route needs to be imported from the

1:05

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

at Angular router package.

1:07

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

So make sure to add this import at the top.

1:10

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

And with this added in,

1:12

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

let's say, ngOnInit,

1:13

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

we can retrieve our query parameters and the fragment.

1:17

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

And just like before,

1:19

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

there are two ways of retrieving it.

1:22

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

For the first approach,

1:24

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

we can simply access the snapshot of our route and access

1:28

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

query parameters here or our fragment.

1:33

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

Just like that.

1:35

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

Now this might bring the same problem as with the params.

1:39

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

This is only run or updated at the time this component

1:43

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

is created.

1:44

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

So if there is a chance of changing your query params from the page

1:48

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

you're currently on,

1:49

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

you might not want to use this approach because it won't be reactive,

1:53

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

it won't display or allow you to react to any changes

1:57

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

which happen after this component has been loaded.

2:00

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

So for now,

2:02

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

let's use this snapshot though.

2:04

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

And let's watch the console once this reloads.

2:07

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

Notice we already have a query parameter and a fragment.

2:09

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

And we see both here.

2:12

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

This is our query parameter object where we have this key value pair

2:16

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

mapping again,

2:17

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

allow added to one.

2:18

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

And this is just a bit broken,

2:21

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

but here you see if I...

2:23

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

make my console a bit broader,

2:25

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

you see the loading hash fragment.

2:27

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

So this is how you can retrieve it.

2:29

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

The alternative,

2:31

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

of course, is to use the route.

2:32

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

And just like we had params as observable,

2:35

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

we also have query params as an observable we can subscribe to,

2:39

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

like this.

2:39

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

And of course,

2:41

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

we also have fragment as an observable we can subscribe to.

2:44

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

So just like before,

2:45

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

this will now allow you to react to changed query parameters.

2:50

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

Now, that's something we will use later in this module.

2:53

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

For now,

2:53

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

nothing will happen here,

2:55

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

but it is important to keep in mind,

2:56

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

like for params,

2:58

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

you do have the same for query params and fragment.

3:00

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

You don't need to unsubscribe here.

3:03

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

Angular will handle it for you,

3:04

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

just like it did for params.

3:06

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

But this is how you can now get access to these extra features and

3:10

S… Speaker 1 (141. Retrieving Query Parameters and Fragments)

how you can make sure that you don't miss the data.

Bu transkript AI (otomat söz tanamak) tarapyndan emele getirildi. Hatalar bar bolup biler - örän möhüm ulanmak üçin ahyrky ses bilen deňle. AI düzgüni

❤️ STT.ai-i söýýäňmi? Dostlaryňa aýt

_Dürs

Bu transkripiň AI haýalnamasyny emele etmek üçin Çap et

Bu transkripsiýa hakda AI-den sora

Bu transkripsiýa hakda bir zat soraň — AI degişli bölümleri tapyp jogap berer.

Başgasyny _Çykar