Question

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

我有以下路线结构：

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导航到路径＆＃34; / customers / orders＆＃34;没有任何反应。

任何人都可以帮助我吗？我创建了一个stackblitz示例来演示它：

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

它背后的想法是我想要一个中央组件（在这种情况下是Customer），从那里，我想导航到其他组件，使用相同的路由器插座，从而保持侧边栏/工具栏/等对用户。

希望这很清楚。

由于

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

Angular 2+路由器 - 懒加载子

1 个答案: