Angular2定义子路由模块的子路由

Question

First of all, I've seen this post which seems to be close to my issue but I admit I got kind of lost : How to route to a Module as a child of a Module - Angular 2 RC 5

I'll try to make it simple :

• I have my app.component.html file which has a <router-outlet> .
• In this first outlet, my MasterModule loads the MasterComponent which has another <router-outlet> . From my MasterRoutingModule , I can then define my child routes from my MasterComponent .
• I have my other module ( EquipmentSLModule ), which has his own routes, and my aim is to add child routes (to be loaded inside my second <router-outlet> from MasterComponent ) from my EquipmentSLRouting .

Is there a way to do that ?

NB : I know there is no code yet, I'll edit and add some in a while.

Answer 1

Let's see if I understand what your asking. Each Module can have it's own routing. You can then reference that routing as children of a path like this:

In your AppRouting, load the routes from the :

export const ROUTES: Routes = [
    {
        path: 'masterRoute',
        loadChildren: './path/to/MasterRoutingModule.module#MasterRoutingModule' }
    }
]

In your MasterRouting, load the EquipmentSLModule's routes as well to utilize the <router-outlet> in the root component of the MasterModule:

export const ROUTES: Routes = [
    { path: '', component: MasterComponent }, //root
    {
        path: 'otherRoute',
        loadChildren: './path/to/EquipmentSLModule.module#EquipmentSLModule' }
    }
]

This will load routes from the EquipmentSLModule as routes in the MastRoutingModule.

In your EquipmentSLModule you will import the routes for that module with RouterModule.forChild(routes) , same for the MasterModule. The AppModule will use RouterModule.forRoot(routes) .

Answer 2

If you want to render your loaded module under a component <router-outlet></router-outlet> hood you need to config as children's of particular component. I made a quick example for what you need, check out here is the link Plunker

  imports: [BrowserModule,
      RouterModule.forRoot([{
              path: '',
              pathMatch: 'full',
              redirectTo: '/home'
          },
          {
              path: 'home',
              component: AppHome
              children: [{
                  path: 'ModuleA',
                  loadChildren: 'src/ModuleA'
              }]
          },
      ])
  ]

Answer 3

Do something like this :

   //... 
   const EquipmentSLRoutes: Routes = [
      { path: 'equipment-sl',  component: EquipmentSLComponent },
      { path: 'equipment-sl/:id', component: EquipmentSLDetailComponent }
    ];

    @NgModule({
      imports: [
        //...
        RouterModule.forChild(EquipmentSLRoutes)
      ],
      exports: [
        //...
        RouterModule
      ]
    })
    export class EquipmentSLModule { }

add this module to your MasterModule imports array.