Lazy Loaded Modules 路由的子级不起作用

问题描述：

我无法使延迟加载模块的路由正常工作.请看看这个stackblitz，它是 Angular 延迟加载示例的副本，但有一些更改.

I can't get the routing of a lazy loaded module working. Please have a look at this stackblitz, it's a copy from the Angular lazy loading example with a few changes.

首先，延迟加载本身似乎工作正常
如果我点击订单"按钮模块被(延迟)加载并显示正确的组件(OrdersComponent)
但是，点击Orders Child"还显示订单组件(而不是 OrdersComponent2)
当我取消注释子路由配置中的 pathMatch: 'full' 时，我会收到错误 Error:无法匹配任何路由.URL Segment: 'orders/child' 子路由

First of all, the lazy loading itself seems to be working correctly
If I click the "orders" button the module is (lazy) loaded and the correct component is being displayed (OrdersComponent)
However, clicking "Orders Child" also displays the orders component (instead of the OrdersComponent2)
When I un-comment the pathMatch: 'full' in the child route configuration I'll get an error Error: Cannot match any routes. URL Segment: 'orders/child' for the child route

我在这里做错了什么?

答

当你有 child-cmps 时，你不应该使用 pathMath: full.

you should not use pathMath: full when you have child-cmps.

有两种可能

如果您的 orders2 应该嵌套在 orders 组件中，请向您的 orders 组件添加一个路由器出口.

<p>
  orders works!
</p>

<router-outlet></router-outlet>

将订单组件移至子组件:

const routes: Routes = [
  {
    path: "",
    children: [
      {
        path: "",
        component: OrdersComponent
      },
      {
        path: "child",
        component: OrdersComponent2
      }
    ]
  }
];

或删除子项并像这样设置:

or remove children and setup like this:

const routes: Routes = [
  {
    path: "",
    component: OrdersComponent
  },
  {
    path: "child",
    component: OrdersComponent2
  }
];

让我知道这是否有帮助

Lazy Loaded Modules 路由的子级不起作用

相关推荐