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: LazyComponent
  }
];

懒惰路线：

@Length(min = 1, message = "Minimum value should be 1")

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

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

2 个答案: