Question

我已经定义了延迟加载的路由和辅助路由，如下面的代码所示。

export const MainRoutes = [
    { path: '', component: WelcomeComponent }, 
    { path: 'Customer', loadChildren: 'Modules/CustomerModule#CustomerModule' },
    { path: 'Supplier', loadChildren: 'Modules/SupplierModule#SupplierModule' },
    {
        path: 'Help',
        outlet: 'helpoutlet',
        component: HelpComponent
    }
];

以下是我的其他路线和辅助路线被调用的代码。

<a [routerLink]="['/Supplier/Add']">Supplier</a> 
<a [routerLink]="['/Customer/Add']">Customer</a><br />
<a [routerLink]="[{outlets: {'helpoutlet': ['Help']}}]">Help</a>

        <router-outlet></router-outlet>
        <router-outlet name="helpoutlet"></router-outlet>

以下是供应商路线的代码

export const SupplierRoutes = [
    {
        path: 'Add', component: SupplierComponent
    }
];

以下是客户路线的代码

export const CustomerRoutes = [
    {
        path: 'Add',
        component: CustomerComponent

    }    
];

当我第一次导航到供应商链接，然后导航到辅助路线（帮助）时，它第一次工作。但在那之后，当我点击客户然后点击辅助路线时，它不起作用。其他路线继续工作。辅助路线从屏幕上消失。

我的其他路由是延迟加载的，是那个问题吗？像胶水一样被困住。

Answer 1

我在我当地的环境中尝试过，效果很好。我认为问题在于您的延迟加载模块，您没有正确加载模块中的路由。我正在使用延迟加载，我认为这不是问题。我附上我的代码，请看一下。

app.routes.module.ts

import { NgModule } from '@angular/core';
import { AuthUserGuard, ClientSaaSUserGuard } from './app.guards';
import { Routes, RouterModule, CanActivate,  } from '@angular/router';
import { DashboardComponent, LoginComponent, RegistrationComponent, PageNotFoundComponent } from './components/common';

const APP_ROUTES: Routes = [
    { path: 'login', component: LoginComponent },
    { path: 'register', component: RegistrationComponent},
    { path: 'consult', loadChildren:'./modules/consult/consult.module#PmConsultingModule'},
    { path: 'saas', loadChildren:'./modules/saas/saas.module#SaasModule'},
    { path: 'logAux', component: LoginComponent, outlet: 'topNav' }
];

@NgModule({
  imports: [
    RouterModule.forRoot(APP_ROUTES)
  ],
  exports: [
    RouterModule
  ]
})
export class MainRoutesModule {};

app.component.html

<a [routerLink]="['register']">Register</a>
<a [routerLink]="['/consult']">Consult</a>
<a [routerLink]="[{ outlets: { 'topNav': ['logAux'] } }]">Aux</a>

<router-outlet></router-outlet>
<div style="color: green; margin-top: 1rem;">topNav bar:</div>
<div style="border: 2px solid blue; padding: 1rem;">
    <router-outlet name="topNav"></router-outlet>
</div>

consult.routes.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule, CanActivate,  } from '@angular/router';
import { PMConsultUserGuard, AdminUserGuard } from './../../app.guards';
import { PMDashboardComponent } from './index';
import { PmConsultingComponent } from './consult.component' ;

const PMCONSULTING_ROUTES: Routes = [
    { path: '', component: PmConsultingComponent, children: [
        { path: 'admin', component: PMDashboardComponent , canActivate: [AdminUserGuard] },
        { path: 'pm', component: PMDashboardComponent , canActivate: [PMConsultUserGuard] }
    ]},
];

@NgModule({
  imports: [
    RouterModule.forChild(PMCONSULTING_ROUTES)
  ],
  exports: [
    RouterModule
  ]
})
export class PMConsultingRoutesModule {};

Angular 2辅助路线首次使用，而不是后续点击

1 个答案: