135. Using Relative Paths in Programmatic Navigation

Jul 15, 2026 05:32 · 5:09 · English · Whisper Turbo · 2 اسپیکر

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

ليکشن

0:02

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

In the last lecture,

0:03

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

we learned how to navigate programmatically.

0:05

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

Now I want to also have a look at how we can use relative paths

0:10

S… Speaker 1 (135. Using Relative Paths in Programmatic Navigation)

there.

0:10

S… Speaker 1 (135. Using Relative Paths in Programmatic Navigation)

So back in our service component,

0:13

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

let's say we have again our reload page link,

0:16

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

but this time it's a button here with button,

0:18

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

button primary,

0:19

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

and still we might use this approach because we want to do some

0:23

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

different things.

0:24

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

So reload page,

0:25

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

and here I will have my click listener on

0:29

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

reload maybe.

0:31

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

So if we now go to our TypeScript code here on

0:35

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

reload, we'll simply,

0:37

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

or will be the method which gets triggered.

0:40

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

And we already inject this service service here.

0:43

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

I also want to inject the router.

0:46

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

So let's add router here.

0:49

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

Make sure to add the import from at Angular

0:53

S… Speaker 1 (135. Using Relative Paths in Programmatic Navigation)

router.

0:54

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

So we learned that now we could say this router

0:58

S… Speaker 1 (135. Using Relative Paths in Programmatic Navigation)

navigate.

0:59

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

And now let's add slash servers here.

1:02

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

If we do this and we save this page and

1:07

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

we go to the service page and click reload,

1:09

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

nothing happens.

1:10

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

We don't get an error because we are already on this page.

1:13

S… Speaker 1 (135. Using Relative Paths in Programmatic Navigation)

Technically,

1:14

S… Speaker 1 (135. Using Relative Paths in Programmatic Navigation)

it still reloads the page,

1:15

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

but keep in mind it never sends a request,

1:17

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

so this reload icon will never spin.

1:20

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

But Angular has simply determined that we are on this page,

1:23

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

so no further action is needed.

1:25

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

Now let's say we remove the slash at the beginning,

1:28

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

so we turn this into a relative path,

1:30

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

and we still are on the service component,

1:33

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

keep this in mind.

1:33

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

So now if this reloaded and we click this page,

1:36

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

we still don't get an error,

1:39

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

and now this might be strange because before,

1:41

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

when we used the router link,

1:44

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

you saw that we did get an error because it would try to add servers

1:49

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

to the end of this path.

1:50

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

And of course, this route now doesn't exist.

1:53

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

So why does it work fine if we use the navigate method?

1:59

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

Because unlike the router link,

2:01

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

the navigate method doesn't know on which route you're currently

2:05

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

on, so to say.

2:06

S… Speaker 1 (135. Using Relative Paths in Programmatic Navigation)

The router link always knows in which component it

2:10

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

sits, in which component's template,

2:12

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

and therefore it knows what the currently loaded route is.

2:15

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

Now you could argue that here we also call this inside of the component

2:19

S… Speaker 1 (135. Using Relative Paths in Programmatic Navigation)

TypeScript code,

2:20

S… Speaker 1 (135. Using Relative Paths in Programmatic Navigation)

so it could determine where it is in,

2:22

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

but it's just not how it works.

2:25

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

So to tell this where we currently are in,

2:29

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

we have to pass a second argument to the navigate method,

2:32

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

which is a JavaScript object.

2:34

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

And here we can configure this navigation action.

2:38

S… Speaker 1 (135. Using Relative Paths in Programmatic Navigation)

Now,

2:39

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

I will come back to this later because there are more things we can add.

2:42

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

But one configuration is the relative to

2:47

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

property here.

2:49

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

Here we define relative to which route this link

2:53

S… Speaker 1 (135. Using Relative Paths in Programmatic Navigation)

should be loaded.

2:54

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

And by default,

2:54

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

this is always the root domain,

2:56

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

which is why we didn't get an error for this service path.

2:59

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

Here we have to give a route though.

3:03

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

So we don't pass a string here.

3:05

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

Instead,

3:06

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

the route is something we can inject here too.

3:09

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

We can get the currently active route by injecting route,

3:13

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

which is of type activated route.

3:16

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

And make sure to import activated route from

3:20

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

the at AngularRouter package too.

3:22

S… Speaker 1 (135. Using Relative Paths in Programmatic Navigation)

Now activated route,

3:24

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

like the name implies,

3:25

S… Speaker 1 (135. Using Relative Paths in Programmatic Navigation)

simply injects the currently active route.

3:28

S… Speaker 1 (135. Using Relative Paths in Programmatic Navigation)

So for the component you loaded,

3:30

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

this will be the route which loaded this component.

3:32

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

And the route simply is kind of a complex JavaScript object,

3:36

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

which keeps a lot of meta information about the currently active route.

3:40

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

Now we can set this as a value.

3:43

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

So this route,

3:44

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

this injected route for the relative to property.

3:47

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

And now with that extra piece of information,

3:51

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

Angular knows what our currently active route is.

3:55

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

And theoretically,

3:56

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

you could also set this to some other route,

3:58

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

which you would have to get by some way.

4:01

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

So here we're telling it.

4:03

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

Now, our currently active route is this activated route.

4:06

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

Relative to this route,

4:07

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

you should navigate.

4:08

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

And then it will simply resolve all

4:12

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

the relative paths you might have here relative to this route.

4:16

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

So if this changes in place,

4:19

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

we now click this button again.

4:21

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

Now we broke the app because now it again tries to find servers

4:26

S… Speaker 1 (135. Using Relative Paths in Programmatic Navigation)

slash servers,

4:27

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

which doesn't exist.

4:28

S… Speaker 1 (135. Using Relative Paths in Programmatic Navigation)

So great,

4:29

S… Speaker 1 (135. Using Relative Paths in Programmatic Navigation)

we broke the app.

4:30

S… Speaker 1 (135. Using Relative Paths in Programmatic Navigation)

But with that,

4:31

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

you should understand how you can work with relative paths in the

4:35

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

navigate method you define relative to what.

4:38

S… Speaker 1 (135. Using Relative Paths in Programmatic Navigation)

This path should be loaded.

4:40

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

The default is the root URL.

4:41

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

That might be the behavior you're looking for.

4:44

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

It might not be the behavior you're looking for.

4:46

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

You can change it with this extra JavaScript object,

4:50

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

second argument to the navigate method,

4:52

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

where you have the relative to property you can set to the route you want

4:56

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

to navigate relative to.

4:57

S… Speaker 1 (135. Using Relative Paths in Programmatic Navigation)

For now,

4:58

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

I will simply comment this out to disable this not working

5:03

S… Speaker 2 (135. Using Relative Paths in Programmatic Navigation)

button and still keep the code in this example project.

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

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

خلاصہ

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

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

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

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