Question

我为仪表板Web应用程序（角度6版本）使用了两种布局。我在加载应用程序的嵌套模块时遇到问题，更具体地说，问题是每次加载某些子组件时都重新加载布局组件。这是我的代码：

app.routing.ts

export const appRoutes: Routes = [
{
    path: '',
    component: HomeLayoutComponent,
    canActivate: [AuthGuard],
    children: [
        {
            path: '',
            component: HomeComponent
        },
        {
            path: 'register',
            component: RegisterComponent
        },
        {
            path: 'repairCards',
            loadChildren: '../modules/repairCardModule/repairCard.module#RepairCardModule'
        }
    ]
},
{
    path: '',
    component: LoginLayoutComponent,
    children: [
        {
            path: 'login',
            component: LoginComponent
        }
    ]
},
{
    path: '**',
    redirectTo: ''
}];

app.module.ts

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    HomeComponent,
    RegisterComponent,
    NavbarComponent,
    HomeLayoutComponent,
    LoginLayoutComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    HttpClientModule,
    AppMaterialModule,
    BrowserAnimationsModule,
    FlexLayoutModule,
    RouterModule.forRoot(appRoutes, { enableTracing: true }) // debugging routes
  ],
  exports: [
    AppMaterialModule,
    RepairCardModule,
    RouterModule
  ],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
    { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

repairCard.routing.ts

export const repairCardRoutes: Routes = [
    {
        path: 'repairCards',
        component: HomeLayoutComponent,
        children: [
            {
                path: '',
                component: ListRepairCardsComponentComponent
            }
        ]
    }
];

repairCardModule.ts

@NgModule({
    declarations: [
        ListRepairCardsComponentComponent],
    imports: [
        RouterModule.forChild(repairCardRoutes)
    ],
    exports: [
        RouterModule
    ],
    providers: [
        { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
        { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
    ],
    bootstrap: [AppComponent]
})
export class RepairCardModule { }

我正在尝试解决加载问题（例如“ repairCards”链接），而无需重新加载年龄的布局。我在网络上发现的最接近的问题是： Feature modules routing with same parent layout angular，但仍无法解决。如果有人可以帮助我，我深表感谢。我试过使用有角度的官方网站上的文档，但问题不一样。

延迟加载具有两个布局Angular 6

0 个答案: