Angular 6使用懶惰laoding訪問父組件的子組件時發生意外行為

Question

我在使用Angular 6的注冊系統上工作。基本AppModule包含以下路由，它們可以正常工作：

const routes: Routes = [
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path:'',
    component: LoginComponent
  },
  {
    path: 'forgot',
    component: ForgotPasswordComponent
    //canActivate: [AuthGuardService]
  },
  {
    path:'dashboard',
    loadChildren: '../app/dashboard/dashboard.module#DashboardModule'

  },
  {
    path: '**',
    redirectTo: 'login',
    pathMatch: 'full'
  }
];

如您所見，我使用的是延遲加載概念，在其中創建了一個名為dashboard的新模塊和組件，其中包含路由腳本dashboard-routing.module.ts ：

const routes: Routes = [
  {
    path:'',
    component: DashboardComponent,
  },
  {
    path:'home',
    loadChildren: './main-navbar/main-navbar.module#MainNavbarModule'

  },
  {
    path:'**',
    redirectTo: '',
    pathMatch: 'full'
  }
];

再次您可以看到，我再次在儀表板組件內部使用了延遲加載，並在其內部創建了名為main-navbar.component的最終模塊/組件，其中將執行該部分以及所有其他登錄后組件。

現在的結構如下：

這是一個檢查一下的小伙伴 。

為了簡單起見，我刪除了登錄和忘記密碼組件，因此您可以直接檢查儀表板組件 。

發生問題的方式如下所示：

登錄后，用戶將正確無誤地看到以下URL：

localhost:4200/dashboard

儀表板包含main-navbar的組件：

現在，我需要顯示此頁面中的其他組件，因此，如果URL為：

localhost:4200/dashboard/home

我被重定向到登錄組件，沒有任何錯誤。 我認為問題在於我如何處理路由文件以及將<router-outlet>元素放在哪里，但無法弄清楚。

Answer 1

在dashboard-routing.module.ts中嘗試以下操作：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DashboardComponent } from './dashboard.component';

const routes: Routes = [
  {
    path: 'dashboard',
    component: DashboardComponent,
    children: [
      { path: '', redirectTo: 'home', pathMatch: 'full' },
      {
        path: 'home',
        loadChildren: './main-navbar/main-navbar.module#MainNavbarModule'

      }
    ]
  }
];

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