如何在angular2中嵌套嵌套模块?

时间:2018-04-17 10:55:02

标签: angular routing

如何在angular2中嵌套嵌套模块?

首次加载应用后,我必须首先访问login.component,然后在验证来自' authguard'导航到一个家庭模块'在pilayoutmodule内部(如下所述)。

网址应该是“登录时”。就像pi3 / home或pi3 / dashboards / commandashboard等: -

我的项目结构

        src
          |---app(Folder)
                 |--pi-login
                     |---pi-login.component.ts
                     |---pi-login.component.html
                 |--piLayout(Folder)
                         |---pilayout.component.ts
                         |---pilayout.component.html
                         |---pilayout.module.ts
                         |---pilayout.routing.ts
                       |--pidashboard(Folder)
                             |--pi-static-dashboard(Folder)
                                    |--commanddashboard(Folder)
                                       |--commanddashboard.component.ts
                                       |--commanddashboard.component.html
                                       |--pi-static-dashboard.component.ts
                            |--pi-static-dashboard.component.html<router-outlet></router-outlet>
                            |--pi-static-dashboard.module.ts
                            |--pi-static-dashboard.routing.ts
                     |--pidashboard.component.ts
                     |--pidashboard.component.html <router-outlet></router-outlet>
                     |--pidashboard.module.ts
                     |--pidashboard.routing.ts
                   |----app.module.ts
                   |----app.component.ts
                   |----app.component.html   <router-outlet></router-outlet>
                   |----app.router.ts

Here, above each folder is a module

I need proper routing pattern to navigate

I have tried like this:-

app.router.ts

export const routes: Routes = [
      {
        path: '', redirectTo: '/login', pathMatch: 'full'
      },
      {
        path: 'login', component: PiLoginComponent
      },
      {
        path: 'pi3', loadChildren: 'app/pilayout/pilayout.module#piLayoutModule'
      },
      {
        path: '**', redirectTo: 'pi/error'
      }
    ];

    export const Routing: ModuleWithProviders = RouterModule.forRoot(routes, { useHash: true });

pilayout.routing.ts

export const pilayoutroutes: Routes = [
        {
            path: '',
            component: piLayoutComponent,
            pathMatch: 'prefix',
            canActivate: [AuthGuard],
            children: [
                { path: '', redirectTo: 'home', pathMatch: 'full' },
 { path: 'home',  loadChildren: './prg-home/prg-home.module#PrgHomeModule' },
                { path: 'dashboards', loadChildren: './prg-dashboards/prg-dashboards.module#PrgDashboardsModule' }
            ]
        }
    ];
    export const PrgpilayoutRouting = RouterModule.forChild(pilayoutroutes);
I am confused with routes.

I have to first visit login.component when app first loads then after verifying from 'authguard' navigate to a 'homeModule' inside pilayoutmodule(described above).

0 个答案:

没有答案