Question

我已经在我的angular 10应用程序中尝试并配置了延迟加载，但是加载了空白页。我在永不触发的子组件的ngOnit中编写了console.log。有人可以告诉我这是什么问题。如您在下面看到的，我试图延迟加载CustomerOrdersComponent组件。我没有在控制台标签中看到任何错误，也没有在网络标签中看到对该网址的调用

app.routing.module

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { CustomerDetailsComponent } from '../app/modules/customer/components/customer-details/customer-details.component';

const routes: Routes = [
  { path: 'customers', component: CustomerDetailsComponent },
  { path: 'orders', loadChildren: () => import('./modules/order/order.module').then(m => m.OrderModule) }

];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

AppModule

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    CommonModule,
    BrowserModule,
    HttpClientModule,
    CustomerModule,
    SharedModule,
    AppRoutingModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

订单路由模块

const orderRoutes: Routes = [
  {
    path: 'orders', component: CustomerOrdersComponent
  },
  {
    path: 'orderDetails', component: OrderDetailsComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(orderRoutes)],
  exports: [RouterModule]
})
export class OrderRoutingModule { }

订购模块

@NgModule({
  declarations: [
    CustomerOrdersComponent,
    OrderDetailsComponent
  ],
  imports: [
    CommonModule,
    OrderRoutingModule
  ]
})
export class OrderModule { }

CustomerOrders组件

export class CustomerOrdersComponent implements OnInit {

  customerOrders: ICustomerOrders[];

  constructor(private customerOrdersService: CustomerOrdersService) { }

  ngOnInit(): void {
    console.log('Order component getting called');
    this.getCustomerOrders();
  }


  getCustomerOrders(): void {
      this.customerOrdersService.getCustomerOrders().subscribe( data => this.customerOrders = data);
  }

}

Answer 1

从以下位置更新嵌套的路由配置：

{
    path: 'orders', component: CustomerOrdersComponent
},

到空路径：

{
    path: '', component: CustomerOrdersComponent
},

默认情况下，路由器寻找空路径。

现在验证应该可以进行了，因为到达CustomerOrdersComponent的路径是/orders，而不是orders/orders。

Answer 2

像下面一样配置 OrderRoutingModule

 const orderRoutes: Routes = [    
  {
    path: '', component: CustomerOrdersComponent
  },
  {
    path: 'orderDetails', component: OrderDetailsComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(orderRoutes)],
  exports: [RouterModule]
})
export class OrderRoutingModule { }

通过使用OrderRoutingModule中的上述更改，路由将按预期开始工作。因为第一个入口点是空的。

延迟加载在配置后无法正常工作

2 个答案: