143. Setting up Child (Nested) Routes

Jul 15, 2026 05:36 · 4:28 · English · Whisper Turbo · 2 Ahotsak
Transkribapen honek gaur iraungitzen du. Biltegiratze iraunkorraren bertsio-berritzea →
Irakasgaiaren indizea
Erakutsi bakarrik
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.

Transkriptu hau AI-k (hizketa-ezagutze automatikoak) sortu du. Erroreak izan ditzake - egiaztatu jatorrizko audioarekin, erabilpen kritikoa izan dadin. AI politika

❤️ Love STT.ai? Tell your friends!
Laburpena
Egin klik Laburpena botoian transkribapen honen AI laburpena sortzeko.
Laburpena...
Galdetu AI-ri transkribapen honi buruz
Egin ezazue galdera hau: transkribapen honi buruz, AI-ak atal egokiak aurkituko ditu eta erantzungo du.
Beste bat transkribatu