如何在Angular中和子路由延迟加载错误路由？

Question

Plunker：https://plnkr.co/edit/GyUApIPQzTvp9vIahYdT?p=preview

我在app.module中设置了这样的路由

const routes = [
  {
    path: '',
    component: DummyComponent
  },

  {
    path: '', // is this right?
    component: SingleComponent,
    children: [
      {
        path: '**', // is this right?
        loadChildren: 'src/lazy/lazy.module#LazyModule'
      }
    ]
  }
];

在lazy.module上我有

const routes = [
  {
    path: '**', // is this right?
    component: LazyComponent
  }
];

问题是实际加载了SingleComponent (页面模板)，但没有加载页面内容(LazyComponent)。(单击notfound链接查看Plunker中的结果)

我应该如何配置它，这样SingleComponent (模板)和LazyComponent (内容)加载才能正确显示页面？

注意:这个LazyComponent应该是一个错误页面，所以我想捕获所有路由(/notfound、/invalid-url、/<anything that doesn't exist in router>)

Answer 1

您在这里所做的是调用/dummy和/notfound路由。

<a routerLink="/dummy">dummy</a>
<a routerLink="/notfound">notfound</a>

在您的路由定义中，您还没有定义这些路由。您可能想要做的是：

const routes = [
  { path: '', redirectTo: '/dummy', pathMatch: 'full' },
  {
    path: 'dummy',
    component: DummyComponent
  },

  {
    path: 'notfound',
    component: SingleComponent,
    children: [
      {
        path: '',
        loadChildren: 'src/lazy/lazy.module#LazyModule'
      }
    ]
  }
];

如果您留下一个空路由，第一行将重定向到虚拟路由。在此特定情况下，您也不需要**通配符。

我希望这对你有所帮助，并且我已经理解了你的问题。

Answer 2

我找到了一种方法来做到这一点，缺点是它改变了URL：

应用路由：

const routes = [
  {
    path: '',
    component: DummyComponent
  },

  {
    path: '',
    component: SingleComponent,
    children: [
      {
        path: 'error',
        loadChildren: 'src/lazy/lazy.module#LazyModule'
      }
    ]
  },

  { path: '**', redirectTo: 'error' },
];

惰性路由：

const routes = [
  {
    path: '**',
    component: LazyComponent
  }
];

柱塞https://plnkr.co/edit/xktoV02EoGjPNwrW2VjR?p=preview