How set routing for nested components

Asked
Active3 hr before
Viewed126 times

7 Answers

routingnestedcomponents
90%

As you can see the children option is just another Array of route configuration objects like routes itself, Therefore, you can keep nesting views as much as you need

Example_snippet/controller/utility/_routing.js/ /user/foo/profile . . .
/user/foo / profile / user / foo / posts +
   -- -- -- -- -- -- -- -- -- + + -- -- -- -- -- -- -- -- - +
   |
   User | | User |
   |
   + -- -- -- -- -- -- -- + | | + -- -- -- -- -- -- - + |
   |
   | Profile | | + -- -- -- -- -- -- > | | Posts | |
   |
   | | | | | | |
   |
   + -- -- -- -- -- -- -- + | | + -- -- -- -- -- -- - + |
   + -- -- -- -- -- -- -- -- -- + + -- -- -- -- -- -- -- -- - +
load more v
88%

We need another route for our ArtistComponent, we want to pass to this component an artistId so it needs to be a parameterised route, the aritstId is mandatory so we are not using optional params,,The final thing we need to do is to tell Angular where we want the ArtistTrackListComponent and ArtistAlbumListComponent components to be injected into the page, we do that by adding in another router-outlet directive in our Artist template like so:,ArtistComponent — This shows some details about an Artist and contains either the ArtistTrackListComponent or ArtistAlbumListComponent

Example_snippet/controller/utility/_routing.js/ @Component({ selector: 'app-. . .
@Component({
  selector: 'app-artist',
  template: `
<h1>Artist</h1>
 `
})
class ArtistComponent {
}
load more v
72%

Now let’s head back to our example, As of right now, we’re hard-coding /topics into our Route and Links

Example_snippet/controller/utility/_routing.js/ <Route path='/home'> <Dashbo. . .
<Route path='/home'>
   <Dashboard />
</Route>
load more v
65%

You can create a nested routing by defining child routes using the children property of a route (alongside a path and component properties), You also need to add a nested router-outlet in the HTML template related to the component linked to the parent route (In our case it's the admin route)

Example_snippet/controller/utility/_routing.js/ import { NgModule } from '@an. . .
import {
   NgModule
} from '@angular/core';
import {
   Routes,
   RouterModule
} from '@angular/router';

import {
   ProjectComponent
} from './project/project.component';
import {
   ProjectListComponent
} from './project-list/project-list.component';
import {
   ProjectCreateComponent
} from './project-create/project-create.component';
import {
   ProjectUpdateComponent
} from './project-update/project-update.component';

const routes: Routes = [{
   path: 'admin',
   component: ProjectComponent,
   children: [{
         path: 'list',
         component: ProjectListComponent
      },
      {
         path: 'create',
         component: ProjectCreateComponent
      },
      {
         path: 'update',
         component: ProjectUpdateComponent
      }
   ]
}];
@NgModule({
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule]
})
export class AdminRoutingModule {}
load more v
75%

Once the router has a URL match, it will try to display the corresponding matching components, for that it will look in the template for a router-outlet component:,With this, if we access the /home or /lessons URLs, we would get the corresponding component displayed

Example_snippet/controller/utility/_nested.js/ `/lessons(aside:playlist//left. . .
`/lessons(aside:playlist//leftmenu:/some/path)`
40%

Create a root component that can load and place all 3 above components through its routing,,The UI5 Routing provides applications with a way to interact with the browser history to create a new entry or to navigate forward/backward with the ability to persist primitive data into the browser hash

Example_snippet/controller/utility/_nested.js/ { ..., routes: [ { . . .
{
   ...,
   routes: [{
            "name": "list",
            "pattern": ":basepath:",
            "target": "list"
         },
         ...
      ],
      targets: {
         ...
      }
}
load more v
22%

If you don't use child modules and just components you can do the following:,At first define your routes similar to the this example,In your StartPageContainerComponent you can also use the router outlet to display the child routes,I'm setting routing for my angular website, Below is structure of my components and path name which i want to have on every of this loaded components:

Example_snippet/controller/utility/_nested.js/ { path: '/', component: Star. . .
{
   path: '/',
   component: StartPageContainerComponent,
   children: [{
         path: 'price',
         component: PriceComponent
      },
      {
         path: 'about',
         component: AboutComponent
      }
   ]
}, {
   path: '/dashboard',
   component: DashboardComponent,
   children: [{
      path: 'charts',
      component: ChartsComponent
   }]
}
load more v