Angular 2+ 路由器 - 延迟加载子项答案

【问题标题】：Angular 2+ Router - Lazy load childrenAngular 2+ 路由器 - 延迟加载子项
【发布时间】：2018-06-19 01:56:52
【问题描述】：

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

我有以下路线结构：

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

它背后的想法是我想要一个中心组件（在本例中为客户），然后我想从那里导航到其他组件，使用相同的路由器插座，从而保持侧边栏/工具栏/等对用户。

希望这已经足够清楚了。

谢谢

【问题讨论】：

标签： angular typescript angular-ui-router

【解决方案1】：

您需要在您的custome.html 中设置router-outlet 如下：

<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>

【讨论】：