Home > Enterprise >  how to show new module without routing to it in angular
how to show new module without routing to it in angular

Time:05-22

Following this tutorial: https://angular.io/guide/lazy-loading-ngmodules#create-a-feature-module-with-routing

I wanted to make the following:

When I go to /customers, I want to be accessing a new module where I will store all customer-related components.

I want to have a menu bar(in that new module), that says Subpage1, Subpage2 etc. and that is there all the time(important).

In app.module I know that I can put anything in app.component.html, before , and it will be there no matter on which page I am. Also, in app-routing.module.ts I never specify that the path for '' should be AppComponent, it is automatically loaded as default.

How can I achieve the same with another module, that I load with:

const routes: Routes = [
  { path: 'customers', loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule) }
];

CodePudding user response:

I didn't know what children means, so with adding:

    path: '', 
    component: CustomersComponent,
    children:[
      {
        path: 'home1', 
        component: Hom1Component
      },
      { 
        path: 'home2', 
        component: Hom2Component 
      }
    ]

with this, router-outlet in customerComponent will show it's own components, and keep stuff from customer.component.html in place all the time.

CodePudding user response:

1-first you need to define the routes in costumers module like so :

 path: '', 
    component: CustomersComponent,
    children:[
      {
        path: 'anything1', 
        component: anything1Component
      },
      { 
        path: 'anything2', 
        component: anything2Component 
      },
      {
        path:'YourMenu',
        component:YourMenucomponent,
        children:[
{
         path: ' Subpage1',
         component: Subpage1component
       },
{
         path: ' Subpage2',
         component: Subpage2component
       }
       ]
    ]

2-you need to have another router-oulet in costumers.component.html inorder to load yourmenu component.

3-and dont forget to define yourmenu component in costumers module!

  • Related