导航后角度布线中断

我有一个带有几个模块的应用程序,每个模块至少有一个路由,还有一个核心模块将它们全部导入。

这工作很好,我可以在不同的模块上导航不同的路径,没有问题。

然后,我实现了一个登录视图,它将用户重定向到成功登录时的仪表板。它做得很好,但当我尝试导航时,url会更改,但内容保持不变:

this.router.navigateByUrl('/s1-customer-information/dashboard');

这是HTML,其中包含我用来导航的菜单:

  <div id="mySidenav" class="sidenav">
    <a href="javascript:void(0)" class="closebtn" (click)="closeNav()">&times;</a>
    <a routerLink="/s1-customer-information">S1 Customer Information</a>
    <a routerLink="/s2-orders-products">S2 Orders and Products</a>
    <a routerLink="/s3-track-drivers">S3 Track and Drivers</a>
    <a routerLink="/s4-invoices-payments">S4 Invoices and Payments</a>
    <a routerLink="/s5-user-management">S5 User Management</a>
    <a routerLink="/authentication">Login</a>
    <a (click)="logout()">Logout</a>
  </div>

以下是我的两个模块上的路径:

const routes: Routes = [
  { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
  { path: 'dashboard', component: S1DashboardComponent },
];

@NgModule({
  imports: [ RouterModule.forChild(routes) ],
  exports: [ RouterModule ]
})
export class S1CustomerInformationRoutingModule { }

--

const routes: Routes = [
  { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
  { path: 'dashboard', component: S2DashboardComponent },
];

@NgModule({
  imports: [ RouterModule.forChild(routes) ],
  exports: [ RouterModule ]
})
export class S2OrdersProductsRoutingModule { }

这是核心模块的路由:

const routes: Routes = [
  {
    path: 'authentication',
    loadChildren: '../authentication/authentication.module#AuthenticationModule'
  },
  {
    path: 's1-customer-information',
    loadChildren: '../s1-customer-information/s1-customer-information.module#S1CustomerInformationModule',
    canActivate: [AuthenticationGuard]
  },
  {
    path: 's2-orders-products',
    loadChildren: '../s2-orders-products/s2-orders-products.module#S2OrdersProductsModule',
    canActivate: [AuthenticationGuard]
  },
  {
    path: 's3-track-drivers',
    loadChildren: '../s3-track-drivers/s3-track-drivers.module#S3TrackDriversModule',
    canActivate: [AuthenticationGuard]
  },
  {
    path: 's4-invoices-payments',
    loadChildren: '../s4-invoices-payments/s4-invoices-payments.module#S4InvoicesPaymentsModule',
    canActivate: [AuthenticationGuard]
  },
  {
    path: 's5-user-management',
    loadChildren: '../s5-user-management/s5-user-management.module#S5UserManagementModule',
    canActivate: [AuthenticationGuard]
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
  exports: [
    RouterModule
  ]
})

export class CoreRoutingModule {  }