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 { }