141. Retrieving Query Parameters and Fragments

Jul 15, 2026 05:35 · 3:16 · English · Whisper Turbo · 1 اسپیکر

یہ نقل آج ختم ہو جاتا ہے. دائمی محفوظہ کے لئے بہتری →

ليکشن

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.

یہ نقل AI (خودکار بولنے کی پہچان) سے بنائی گئی تھی. غلطیاں ہو سکتے ہیں - اہم استعمال کے لیے اصل آڈیو کے مقابلے میں جانچیں. AI پالیسي

❤️ STT.ai سے محبت؟ اپنے دوستوں کو بتاؤ۔

خلاصہ

اس نقل کا AI خلاصہ پیدا کرنے کے لئے خلاصہ کرو کلک کریں.

اس نقل کے بارے ميں AI سے پوچھو

اس نقل کے بارے میں کچھ پوچھو - AI متعلقہ حصوں کو تلاش کرے گا اور جواب دے گا۔

دوسرا نقل کریں