Angular 6使用延迟laoding访问父组件的子组件时出现意外行为

问题描述 投票:0回答:1

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

结构现在如下所示:

enter image description here

这是一个plunker to check it

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

出现问题的描述如下:

登录后,用户将正确看到以下URL,没有错误:

localhost:4200/dashboard

仪表板包含main-navbar组件的位置:

enter image description here

enter image description here

现在我需要在这个页面中显示其他组件,所以如果URL是:

localhost:4200/dashboard/home

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

angular routing routes lazy-loading angular6
1个回答
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 { }
© www.soinside.com 2019 - 2024. All rights reserved.