Angular 6 使用惰性加载访问父组件的子组件时出现意外行为

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'
  }
];

正如你再次看到的，我在仪表板组件中再次使用延迟加载，在它内部，我创建了最终的 module/component 调用 main-navbar.component 其中这部分，所有其他登录后组件将被执行。

现在的结构如下：

这里是plunker to check it.

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

问题描述如下：

登录后，用户将正确无误地看到以下 URL：

localhost:4200/dashboard

其中仪表板包含 main-navbar 的组件：

现在我需要显示此页面内的其他组件，所以如果 URL 是：

localhost:4200/dashboard/home

我被重定向到登录组件并且没有收到任何错误。我认为问题在于我如何处理路由文件，以及我将 <router-outlet> 元素放在哪里，但无法弄清楚。

Answer 1

在仪表板中试试这个-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 { }

Angular 6 使用惰性加载访问父组件的子组件时出现意外行为

Angular 6 Unexpected behavior when getting access to child component of a parent component using lazy laoding

routing

routes

lazy-loading

angular

angular6