延迟加载模块路由的子级不起作用 [英] Children of Lazy Loaded Modules routes don't work

问题描述

我无法使延迟加载模块的路由正常工作.请看看这个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: Cannot match any routes.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.

有两种可能

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

<p>
  orders works!
</p>

<router-outlet></router-outlet>

1. 将订单组件移至子组件:

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

让我知道这是否有帮助

这篇关于延迟加载模块路由的子级不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！