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的最终模块/组件，其中此部分，登录组件之后的所有其他模块/组件将被执行。

结构现在如下所示：

这是一个plunker to check it。

为简单起见，我删除了登录名并忘记了密码组件，因此您可以直接检查仪表板组件。

出现问题的描述如下：

登录后，用户将正确看到以下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 { }