【问题标题】:Angular 5 Lazy Loading Route Module with ChildrenAngular 5延迟加载路由模块与孩子
【发布时间】:2018-06-10 20:13:20
【问题描述】:

我很难弄清楚为什么 TEST 1 子级没有加载当前组件

Test1ListComponent 视图在我路由到 Test1ChildComponent 后显示。 URL 更改,但 Test1ChildComponent 视图未加载

路由树:

app-routing.module

const routes: Routes = [
  {
    path: '',
    pathMatch: 'full'
  },
  {
    path: 'app',
    loadChildren: './core/core.module#CoreModule'
  }
];

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

core-routing.module

const routes: Routes = [
  {
    path: '',
    redirectTo: '/', 
    pathMatch: 'full'
  },
  {
    path: 'test1',
    loadChildren: '../test1/test1.module#Test1Module'
  },
];

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

test1-routing.module

const routes: Routes = [
  {
    path: '',
    redirectTo: 'test1',
    pathMatch: 'full'
  },
  {
    path: '',
    component: Test1ListComponent,
    data: {
      displayName: 'Test1'
    },
    children: [
      {
        path: 'test1/:testId',
        component: Test1ChildComponent,
        data: {
          displayName: 'Test1Child'
        },
    children: [
          {
            path: 'test2/:testId',
            component: Test2hildComponent,
            data: {
              displayName: 'Test2Child'
            }
          }
        ]
      }
    ]
  },
];

【问题讨论】:

  • 所有组件都有<router-outlet></router-outlet>
  • 我可以访问 Test1ListComponent,但是当我以正确的路径登陆 Test1ChildComponent 时,url 会发生变化,但我仍然在 Test1ListComponent 视图中

标签: angular angular-routing angular-route-segment


【解决方案1】:
const routes: Routes = [
  {
    path: '',
    redirectTo: 'test1',
    pathMatch: 'full'
  },
  {
    path: 'test1',
    component: Test1ListComponent,
    data: {
      displayName: 'Test1'
    },
    children: [
      {
        path: '',
        redirectTo: 'test1',
        pathMatch: 'full'
      },
      {
        path: 'test1/:testId',
        component: Test1ChildComponent,
        data: {
          displayName: 'Test1Child'
        },
        children: [
          {
            path: 'test2/:testId',
            component: Test2hildComponent,
            data: {
              displayName: 'Test2Child'
            }
          }
        ]
      }
    ]
  },
];

【讨论】:

  • 感谢您快速发布想法!很抱歉,这没有用。您还有其他建议吗?
  • 获取Test1ChildComponent的路径是什么?
  • 不是路径
  • 这与延迟加载此模组有关
  • 我的意思是你想在浏览器上使用什么 url 来获取这个组件
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-12-22
  • 2023-03-11
  • 2017-08-21
  • 1970-01-01
  • 2018-05-22
  • 1970-01-01
相关资源
最近更新 更多