[英]Angular 2+ Router - Lazy load children
I'm trying to implement lazy loading on children route (which is already lazy loaded) without success. 我试图在子路由(已经是延迟加载)上实现延迟加载而没有成功。
I have the following route structure: 我具有以下路线结构:
const routes: Routes = [
{
path: 'customers',
loadChildren: 'app/customers/customers.module#CustomersModule'
},
{
path: '',
redirectTo: '',
pathMatch: 'full'
}
];
And the CustomersModule route: 和客户模块路线:
const routes: Routes = [
{
path: '',
component: CustomerListComponent,
children: [
{
path: 'orders',
loadChildren: 'app/orders/orders.module#OrdersModule'
}
]
}
];
If I try to navigate from CustomerListComponent to the path "/customers/orders" nothing happens. 如果我尝试从CustomerListComponent导航到路径“ / customers / orders”,则不会发生任何事情。
Can anyone help me? 谁能帮我? I created an stackblitz sample to demonstrate it:
我创建了一个stackblitz示例来演示它:
https://stackblitz.com/edit/angular-thj13j https://stackblitz.com/edit/angular-thj13j
The idea behind it is that I want to have a central component (in this case Customer) and from there, I want to navigate to other components, using the same router outlet, thus keeping sidebars/toolbars/etc visible to the user. 其背后的想法是,我想要一个中央组件(在这种情况下为Customer),然后我希望使用同一路由器出口从那里导航到其他组件,从而使侧边栏/工具栏/等对用户可见。
Hopefully that is clear enough. 希望这已经足够清楚了。
Thanks 谢谢
You need to router-outlet in your custome.html as below : 您需要在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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.