Angular - 使用子路由在模块内延迟加载模块 [英] Angular - Lazy loading a module inside module with a child route

问题描述

我有一个 angular 应用程序，其中我的主路由模块正确地延迟加载模块.然而，我现在有一个额外的要求，即在一个延迟加载的模块中显示另一个组件/模块.

I have an angular application where my main routing module lazy loads modules correctly. I do however now have an additional requirement of displaying another component / module inside one of the lazy loaded modules.

当我现在导航到 users/id(这部分工作正常)时，我想要 HTML 中的选项卡视图，我可以在其中根据单击的选项卡加载其他模块.例如，我可能有 3 个按钮:User Albums、User Favourites 和 User Stats.当我单击其中一个时，我希望使用 <router-outlet></router-outlet>

When I now navigate to users/id (this part works correctly) I want a tab view in the HTML where I can load additional modules based on what tab is clicked on. For example, I might have 3 buttons: User Albums, User Favourites and User Stats. When I click on one of those, I want a component to display on the same page as a child using the <router-outlet></router-outlet>

应用路由模块

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

const routes: Routes = [
  { path: 'login',                 loadChildren: '../app/login/login.module#LoginModule' },
  { path: 'users',                 loadChildren: '../app/users/users.module#UsersModule' },
  { path: 'users/:id',             loadChildren: '../app/user-detail/user-detail.module#UserDetailModule' },
  { path: '',                      loadChildren: '../app/login/login.module#LoginModule', pathMatch: 'full' },
  { path: '**',                    loadChildren: '../app/login/login.module#LoginModule', pathMatch: 'full' },
];

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

user-detail.module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UserDetailComponent } from './user-detail.component';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {
    path: '',
    component: UserDetailComponent,
    children: [
      {
        path: 'useralbums',
        loadChildren: '../user-albums/user-albums.module#UserAlbumsModule'
      },
    ]
  },
]


@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(routes),
  ],
  declarations: [UserDetailComponent]
})
export class UserDetailModule { }

user-detail.html

<h1>User Detail</h1>
<a [routerLink]="['/users', user_id, 'useralbums']">User albums</a>
<a>Link Two</a>
<a>Link Three</a>
<router-outlet></router-outlet>

推荐答案

由于您希望在子路由更改的情况下加载新组件并将其作为延迟加载模块的一部分加载，因此您可以添加一个 到 user-detail.component.html 的模板.

Since you want a new component to be loaded in case of a child route change and load it as a part of a lazy-loaded module, you can add a <router-outlet></router-outlet> to the template of the user-detail.component.html.

像这样:

<h1>User Detail</h1>
<ul class="nav">
  <li class="nav-item">
    <a [routerLink]="['/users', user_id, 'user-albums']">User Albums</a>
  </li>
  <li class="nav-item">
    <a [routerLink]="['/users', user_id, 'user-favourites']">User Favourites</a>
  </li>
  <li class="nav-item">
    <a [routerLink]="['/users', user_id, 'user-stats']">User Stats</a>
  </li>
</ul>
<router-outlet></router-outlet>

现在，在这个文件的模块中，定义一个路由配置来延迟加载各个模块:

Now, in the module of this file, define a route configuration to load the respective modules lazily:

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

import { UserDetailComponent } from './user-detail.component';

const routes: Routes = [
  { 
    path: '', 
    component: UserDetailComponent,
    children: [
      {
        path: 'user-albums',
        loadChildren: './user-albums/user-albums.module#UserAlbumsModule'
      },
      {
        path: 'user-favourites',
        loadChildren: './user-favourites/user-favourites.module#UserFavouritesModule'
      },
      {
        path: 'user-stats',
        loadChildren: './user-stats/user-stats.module#UserStatsModule'
      },
    ]
  }
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(routes)
  ],
  declarations: [UserDetailComponent]
})
export class UserDetailModule { }

然后使用它们的配置定义惰性模块，如下所示:

And then define the lazy modules with their configuration like this:

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

import { UserAlbumsComponent } from './user-albums.component';

const routes: Routes = [
  { path: '**', component: UserAlbumsComponent }
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(routes)
  ],
  declarations: [UserAlbumsComponent]
})
export class UserAlbumsModule { }

PS:由于有很多组件，我建议您仔细查看解决方案stackblitz，以了解路由是如何连接的.

PS: Since there are a lot of components, I'd suggest that you have a look at the solution stackblitz carefully in order to understand how the routing is wired in.

这是一个 工作示例 StackBlitz 供您参考.

Here's a Working Sample StackBlitz for your ref.

这篇关于Angular - 使用子路由在模块内延迟加载模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！