首页 文章

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

提问于
浏览
0

我正在尝试在子路由(已经是延迟加载)上实现延迟加载而没有成功 .

我有以下路线结构:

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

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

希望这很清楚 .

谢谢

1 回答

  • 3

    您需要在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>
    

相关问题