143. Setting up Child (Nested) Routes

Jul 15, 2026 05:36 · 4:28 · English · Whisper Turbo · 2 Дынамік

Гэты запіс скончыцца сёння. Абнавіць для пастаяннага захоўвання →

Індэкс лекцыі

0:02

S… Speaker 2 (143. Setting up Child (Nested) Routes)

We improved our app quite a bit,

0:04

S… Speaker 2 (143. Setting up Child (Nested) Routes)

but the issue we have is that if we click on a server or a user,

0:08

S… Speaker 2 (143. Setting up Child (Nested) Routes)

we load a brand new page.

0:10

S… Speaker 2 (143. Setting up Child (Nested) Routes)

It would be nicer if we would load it next to this menu.

0:13

S… Speaker 2 (143. Setting up Child (Nested) Routes)

So we need some nested routing.

0:15

S… Speaker 2 (143. Setting up Child (Nested) Routes)

We can also see that in the app module,

0:19

S… Speaker 2 (143. Setting up Child (Nested) Routes)

we kind of have some duplication here.

0:23

S… Speaker 2 (143. Setting up Child (Nested) Routes)

All these routes here start with servers and all these routes with users.

0:27

S… Speaker 2 (143. Setting up Child (Nested) Routes)

So it would be nice to nest them and to have

0:31

S… Speaker 1 (143. Setting up Child (Nested) Routes)

some

0:32

S… Speaker 1 (143. Setting up Child (Nested) Routes)

child routes,

0:32

S… Speaker 2 (143. Setting up Child (Nested) Routes)

which all start with service than here,

0:35

S… Speaker 1 (143. Setting up Child (Nested) Routes)

in this case,

0:35

S… Speaker 1 (143. Setting up Child (Nested) Routes)

for example.

0:36

S… Speaker 1 (143. Setting up Child (Nested) Routes)

Let's add such child routes.

0:38

S… Speaker 1 (143. Setting up Child (Nested) Routes)

To do this,

0:39

S… Speaker 2 (143. Setting up Child (Nested) Routes)

I'll go to my service component route,

0:42

S… Speaker 2 (143. Setting up Child (Nested) Routes)

to the slash service route,

0:44

S… Speaker 2 (143. Setting up Child (Nested) Routes)

and I'll add another property,

0:46

S… Speaker 1 (143. Setting up Child (Nested) Routes)

children.

0:47

S… Speaker 2 (143. Setting up Child (Nested) Routes)

Children takes another array of routes,

0:50

S… Speaker 2 (143. Setting up Child (Nested) Routes)

so now I can simply take my two other service routes here and

0:54

S… Speaker 2 (143. Setting up Child (Nested) Routes)

add them inside of this array,

0:56

S… Speaker 1 (143. Setting up Child (Nested) Routes)

as children.

0:58

S… Speaker 2 (143. Setting up Child (Nested) Routes)

Now servers should now be removed because that is not always

1:02

S… Speaker 2 (143. Setting up Child (Nested) Routes)

prepended at the beginning anyways.

1:03

S… Speaker 2 (143. Setting up Child (Nested) Routes)

So we have to make sure to get rid of it here.

1:06

S… Speaker 2 (143. Setting up Child (Nested) Routes)

And now we have just ID and ID added.

1:10

S… Speaker 2 (143. Setting up Child (Nested) Routes)

So this is now already better because now

1:14

S… Speaker 2 (143. Setting up Child (Nested) Routes)

we group that together.

1:17

S… Speaker 2 (143. Setting up Child (Nested) Routes)

It gives us more than this visual grouping here though.

1:21

S… Speaker 2 (143. Setting up Child (Nested) Routes)

You notice that on the servers here,

1:24

S… Speaker 2 (143. Setting up Child (Nested) Routes)

we have the servers component as the,

1:27

S… Speaker 1 (143. Setting up Child (Nested) Routes)

well,

1:28

S… Speaker 2 (143. Setting up Child (Nested) Routes)

component to be loaded still.

1:29

S… Speaker 1 (143. Setting up Child (Nested) Routes)

The question now is,

1:31

S… Speaker 2 (143. Setting up Child (Nested) Routes)

where will the server component be loaded then?

1:33

S… Speaker 2 (143. Setting up Child (Nested) Routes)

Because that is yet another child route of our servers component.

1:37

S… Speaker 2 (143. Setting up Child (Nested) Routes)

And you can see that this is an issue.

1:39

S… Speaker 2 (143. Setting up Child (Nested) Routes)

If we reload our app here,

1:41

S… Speaker 2 (143. Setting up Child (Nested) Routes)

everything's working.

1:42

S… Speaker 2 (143. Setting up Child (Nested) Routes)

If I click on test server,

1:44

S… Speaker 2 (143. Setting up Child (Nested) Routes)

now we get an error.

1:45

S… Speaker 2 (143. Setting up Child (Nested) Routes)

Because now the error tells us that it cannot find an outlet.

1:50

S… Speaker 2 (143. Setting up Child (Nested) Routes)

to load our server component in.

1:52

S… Speaker 2 (143. Setting up Child (Nested) Routes)

And indeed it can't,

1:53

S… Speaker 2 (143. Setting up Child (Nested) Routes)

because the only router outlet,

1:55

S… Speaker 2 (143. Setting up Child (Nested) Routes)

the only hook in our code where it should load components,

1:58

S… Speaker 2 (143. Setting up Child (Nested) Routes)

is in our app component,

2:00

S… Speaker 1 (143. Setting up Child (Nested) Routes)

here.

2:01

S… Speaker 2 (143. Setting up Child (Nested) Routes)

Now, that is reserved for all our routes on the top

2:05

S… Speaker 1 (143. Setting up Child (Nested) Routes)

level.

2:06

S… Speaker 1 (143. Setting up Child (Nested) Routes)

So,

2:07

S… Speaker 1 (143. Setting up Child (Nested) Routes)

slash nothing,

2:08

S… Speaker 1 (143. Setting up Child (Nested) Routes)

slash users,

2:09

S… Speaker 2 (143. Setting up Child (Nested) Routes)

users ID name and servers.

2:11

S… Speaker 2 (143. Setting up Child (Nested) Routes)

But the child routes of servers need a separate

2:15

S… Speaker 2 (143. Setting up Child (Nested) Routes)

outlet because they can't override the service component.

2:18

S… Speaker 1 (143. Setting up Child (Nested) Routes)

Instead, they should be loaded,

2:20

S… Speaker 2 (143. Setting up Child (Nested) Routes)

nested into this service component.

2:23

S… Speaker 2 (143. Setting up Child (Nested) Routes)

And that actually is the behavior we want.

2:26

S… Speaker 2 (143. Setting up Child (Nested) Routes)

So we can quickly get there by going to the service component HTML

2:30

S… Speaker 2 (143. Setting up Child (Nested) Routes)

file and here where we load the edit page or the

2:34

S… Speaker 1 (143. Setting up Child (Nested) Routes)

app server page.

2:35

S… Speaker 1 (143. Setting up Child (Nested) Routes)

Well here

2:37

S… Speaker 2 (143. Setting up Child (Nested) Routes)

I will simply comment out all that code and

2:41

S… Speaker 2 (143. Setting up Child (Nested) Routes)

instead add a router outlet here.

2:44

S… Speaker 2 (143. Setting up Child (Nested) Routes)

This now adds a new hook,

2:47

S… Speaker 2 (143. Setting up Child (Nested) Routes)

which will be used on all child routes of the route

2:51

S… Speaker 2 (143. Setting up Child (Nested) Routes)

being loaded on the service component,

2:53

S… Speaker 2 (143. Setting up Child (Nested) Routes)

which of course is our slash service route here.

2:57

S… Speaker 2 (143. Setting up Child (Nested) Routes)

So all these child routes will be loaded in this router outlet

3:01

S… Speaker 2 (143. Setting up Child (Nested) Routes)

place now.

3:02

S… Speaker 1 (143. Setting up Child (Nested) Routes)

So if we save this,

3:04

S… Speaker 2 (143. Setting up Child (Nested) Routes)

And now we let this reload.

3:06

S… Speaker 2 (143. Setting up Child (Nested) Routes)

You don't see anything here,

3:07

S… Speaker 1 (143. Setting up Child (Nested) Routes)

but if I click a server,

3:08

S… Speaker 2 (143. Setting up Child (Nested) Routes)

it's now loaded next to the menu because this is where we added

3:12

S… Speaker 2 (143. Setting up Child (Nested) Routes)

our second router outlet.

3:14

S… Speaker 2 (143. Setting up Child (Nested) Routes)

And this is how you can easily add child routes.

3:17

S… Speaker 2 (143. Setting up Child (Nested) Routes)

Let's do the same for the user routes now.

3:19

S… Speaker 2 (143. Setting up Child (Nested) Routes)

In the app module,

3:21

S… Speaker 2 (143. Setting up Child (Nested) Routes)

I'll add children here,

3:23

S… Speaker 2 (143. Setting up Child (Nested) Routes)

so this property which takes an array of routes.

3:26

S… Speaker 2 (143. Setting up Child (Nested) Routes)

And I only have one nested route here,

3:29

S… Speaker 2 (143. Setting up Child (Nested) Routes)

but that's fine,

3:30

S… Speaker 2 (143. Setting up Child (Nested) Routes)

so I will add it here.

3:31

S… Speaker 2 (143. Setting up Child (Nested) Routes)

Get rid of the users at the beginning.

3:34

S… Speaker 1 (143. Setting up Child (Nested) Routes)

just have slash,

3:35

S… Speaker 1 (143. Setting up Child (Nested) Routes)

well,

3:36

S… Speaker 2 (143. Setting up Child (Nested) Routes)

then the ID and name,

3:38

S… Speaker 2 (143. Setting up Child (Nested) Routes)

the two dynamic parameters,

3:39

S… Speaker 2 (143. Setting up Child (Nested) Routes)

and load the user component.

3:41

S… Speaker 2 (143. Setting up Child (Nested) Routes)

And now in my users component HTML file,

3:45

S… Speaker 2 (143. Setting up Child (Nested) Routes)

I'll replace my app user here with another router outlet

3:49

S… Speaker 2 (143. Setting up Child (Nested) Routes)

where all the user -related child routes or the one user -related

3:53

S… Speaker 1 (143. Setting up Child (Nested) Routes)

child route we have will be loaded.

3:56

S… Speaker 1 (143. Setting up Child (Nested) Routes)

So if we save this,

3:57

S… Speaker 2 (143. Setting up Child (Nested) Routes)

you now see we load the user next to it.

4:00

S… Speaker 2 (143. Setting up Child (Nested) Routes)

And that is why it is super important to dynamically update the ID

4:04

S… Speaker 2 (143. Setting up Child (Nested) Routes)

and so on because the component wasn't exchanged.

4:08

S… Speaker 2 (143. Setting up Child (Nested) Routes)

We were able to switch the loaded user while this old component,

4:12

S… Speaker 2 (143. Setting up Child (Nested) Routes)

the user component,

4:14

S… Speaker 1 (143. Setting up Child (Nested) Routes)

the single user component was already loaded.

4:16

S… Speaker 2 (143. Setting up Child (Nested) Routes)

And this is how you can implement child routing nested routes

4:20

S… Speaker 2 (143. Setting up Child (Nested) Routes)

with this children property,

4:23

S… Speaker 2 (143. Setting up Child (Nested) Routes)

which then holds all the nested routes.

Гэты тэкст быў створаны AI (аўтаматычнае вызначэнне мовы). Можа ўтрымліваць памылкі - праверце з арыгінальным гукам для выкарыстання. Палітыка AI

❤️ Любіш STT.ai? Раскажы сваім сябрам!

Кароткае апісанне

Націсніце "Сумаваць", каб стварыць падрабязнае апісанне гэтага транскрыпту.

Запытаць у AI пра гэты пераклад

Запытайцеся пра што-небудзь з гэтага перакладу — машынны інтэлект знойдзе адпаведныя раздзелы і адкажа.

Перапісаць іншае