143. Setting up Child (Nested) Routes

Jul 15, 2026 05:36 · 4:28 · English · Whisper Turbo · 2 Talare
Den här utskriften går ut idag. Uppgradering för permanent lagring →
Föreläsningsindex
Visar endast
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.

Denna utskrift genererades av AI (automatisk taligenkänning). Kan innehålla fel — verifiera mot originalljudet för kritisk användning. Politik för AI

❤️ Älskar du STT.ai? Berätta för dina vänner!
Sammanfattning
Klicka på Summarize för att generera en AI sammanfattning av denna utskrift.
Sammanfatta...
Fråga AI om detta Transcript
Fråga något om denna utskrift — AI kommer att hitta relevanta avsnitt och svar.
Skriv om en annan