Angular 2+ 路由器 - 延迟加载 children

Question

我正在尝试在 children 路由（已经是延迟加载）上实现延迟加载但没有成功。

我有以下路由结构：

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

CustomersModule 路由：

const routes: Routes = [
  {
    path: '',
    component: CustomerListComponent,
    children: [
      {
        path: 'orders',
        loadChildren: 'app/orders/orders.module#OrdersModule'
      }
    ]
  }
];

如果我尝试从 CustomerListComponent 导航到路径“/customers/orders”，什么也不会发生。

谁能帮帮我？我创建了一个 stackblitz 示例来演示它：

https://stackblitz.com/edit/angular-thj13j

其背后的想法是我想要一个中央组件（在本例中为客户），然后我想从那里导航到其他组件，使用相同的路由器出口，从而保持 sidebars/toolbars/etc 可见给用户。

希望这已经足够清楚了。

谢谢

Answer 1

您需要在 custome.html 中设置路由器插座，如下所示：

<p>
  customer-list works!
</p>

<!-- <button routerLink="/orders">Orders</button> -->

<button (click)="onNavigateClick()">Orders</button>

<!-- 
Copyright 2017-2018 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->

<router-outlet></router-outlet>

Angular 2+ 路由器 - 延迟加载 children

Angular 2+ Router - Lazy load children

angular

typescript

angular-ui-router