Question

我有一个正在成长的项目，我需要开始延迟加载组件。但是，这样做时，我也将组件懒惰地加载到子route.module中。

我的应用程序路由

...     
const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'cart', loadChildren: '../app/cart/cart.module#CartModule' },
  { path: 'checkout', loadChildren: '../app/checkout/checkout.module#CheckoutModule' },
  { path: 'contact', loadChildren: '../app/contactus/contactus.module#ContactusModule' },
  { path: 'users', loadChildren: './users/user.module#UserModule' },
  { path: 'products', loadChildren: './products/product.module#ProductModule' },
  { path: 'auth/login', loadChildren: './auth/login/login.module#LoginModule'},
  { path: 'auth/signup', loadChildren: './auth/signup/signup.module#SignupModule'},
  { path: 'admin', loadChildren: './admin/admin.module#AdminModule'},
  // { path: 'admin', component: AdminComponent},
  { path: 'auth', redirectTo: 'auth/login'},
  { path: '**', loadChildren: './page-not-found/page-not-found.module#PageNotFoundModule' },
];
...

然后在我的管理路由中，我有很多组件都是admin组件的子组件。

const adminRoutes: Routes = [

  { path: '', component: AdminComponent,
children: [
  {
    path: 'add-product',
    // outlet: 'adminRoute',
    // loadChildren: './components/add-product/add-product.module#AddProductModule'
    component: AddProductComponent,
    data: {title: 'Add New Product'}
  }, {
    path: 'admin/all-products',
    outlet: 'adminRoute',
    loadChildren: './components/all-products/all-products.module#AllProductsModule'
  }, {
    path: 'admin/options',
    outlet: 'adminRoute',
    loadChildren: './components/options/options.module#OptionsModule'
  }, {
    ...

我希望他们以前将它们装入辅助路由器出口。

<div class="container-fluid">
  <router-outlet name="adminRoute"></router-outlet>
</div>

现在，当我单击链接时进入管理页面，但其他所有链接均无效。辅助路由器出口中没有负载。我什至无法打开一个新窗口。我来这已经有一段时间了，所以我有点炸了。

...
<li class="nav-item" routerLinkActive="active">
      <a class="nav-link" [routerLink]="['add-product']">
        <!-- <a class="nav-link" [routerLink]="['./',
        { outlets:
          { adminRoute: 'add-product'}
        }]"> -->
          <i class="nav-icon icon-pencil"></i> Add Product</a>
</li>
<li class="nav-item" routerLinkActive="active">
        <a class="nav-link" [routerLink]="['./',
        { outlets:
            { adminRoute: 'admin/all-products' }
        }]">
          <i class="nav-icon icon-list"></i> All Products</a>
    </li>
...

您可以看到我正在尝试所有类型的方法，但是没有任何效果。是否有更好的方法来解决我的问题？

是否可以/必须在子路由模块上使用延迟加载

0 个答案: