Question

我有三个惰性模块，分别是A，B和C。B是A内的延迟加载模块。我需要从C导航到模块B的非默认路由。

有什么可能。？

模块A路线

const SEARCH_ROUTES: Routes = [
{ path: 'suggested_trips', component: TripListComponent },
{ path: 'shipper',canActivate: [AccountTypeGuard],data: {roles: ACCOUNT_TYPES.SHPR.value}, loadChildren: './search-shipper/search-shipper.module#SearchShipperModule' } // Module B
];

模块B路线

    {
    path: '',
    component: SearchShipperComponent,
    children: [
        {
            path: 'post', component: SearchShipperNegotiateComponent,
            resolve: { tripsData: NegotiateTripsResolveService }, 
            children: [
                { path: NEGOTIATE_STEPS.step1, component: CargoDetailsComponent},
                { path: NEGOTIATE_STEPS.step2, component: CargoMediaComponent },
                { path: NEGOTIATE_STEPS.step3, component: NegotiateComponent },
                { path: '', redirectTo: NEGOTIATE_STEPS.step1, pathMatch: 'full' }
            ]
        }
    ]
}

Answer 1

显示一些代码可以更好地帮助我们理解您的问题。我不确定“ B是A内的延迟加载模块”是什么意思？

无论如何，您可以设置路由以路由到任何其他模块的任何延迟加载的模块。只需适当地设置您的路线即可。路由器会小心合并您的路由，并且都可以从应用程序中的任何位置访问它们。

那么...会看到一些代码帮助吗？：-）

应用程序路由模块

@NgModule({
    imports: [
        RouterModule.forRoot([
            { path: 'welcome', component: WelcomeComponent },
            {
                path: 'products',
                canActivate: [ AuthGuard ],
                data: { preload: true },
                loadChildren: 'app/products/product.module#ProductModule'
            },
            { path: '', redirectTo: 'welcome', pathMatch: 'full' },
            { path: '**', component: PageNotFoundComponent }
        ])
    ],
    exports: [ RouterModule ]
})
export class AppRoutingModule { }

product.module（延迟加载）

RouterModule.forChild([
  {
    path: '',
    component: ProductListComponent
  },
  {
    path: ':id',
    component: ProductDetailComponent
  },
  {
    path: ':id/edit',
    component: ProductEditComponent
  }
])

app.component.html

        <ul class="nav navbar-nav">
            <li routerLinkActive="active">
                <a [routerLink]="['/welcome']">Home</a>
            </li>
            <li routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
                <a [routerLink]="['/products']">Product List</a>
            </li>
            <li routerLinkActive="active">
                <a [routerLink]="['/products', 0, 'edit']">Add Product</a>
            </li>
        </ul>

请注意，应用程序组件的模板同时路由到应用程序模块路由和延迟加载的模块的路由。

此示例比您的方案更简单...但是在概念上是相同的。

导航到内部延迟加载模块（Angular延迟加载模块）的非默认路由

1 个答案: