Child routes

The routes we have created so far are very easy and straightforward use cases. In complex applications, we will need to use deep linking, which refers to hunting down a link into many levels under. 

Let's take a look at some examples:

  • /home/listings (shows listings inside home)
  • /listing/55/details (shows the details of listing #55)
  • /listing/721/facilities (shows the facilities of listing #721)

That's where child routes can be very handy for us to use.

In the following example, we are creating a child route inside the home route path:

const routes: Routes = [
{ path: 'home',
component: HomeComponent,
children: [
{ path: 'listings',
component: ListingsComponent}

]
},
{path: 'listings/:id', component: ListingDetailsComponent },
{path: '', redirectTo: '/home', pathMatch: 'full'}
];

In the preceding code, we are defining children for the home path and, again, we are specifying the path and component, which will correspond to the child route path.

OK, fine. This is good stuff.

What if we want to add some validation before a user can access a particular route? like a bouncer outside a club? That bouncer is called a route guard.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.19.27.178