angular11中的多路由器问题

Question

我在这里有一个问题，我不知道我是否遵循了角的最佳实践，即使它现在是有效的：

下面是这个嵌套组件的结构:页面

​

​

这是我的app-routing.module.ts文件：

const routes: Routes = [
  { path: 'register', component: RegisterComponent },
  { path: 'home', component: HomeComponent },
  { path: 'login', component: LoginComponent },
  { path: 'welcome', component: WelcomeComponent, canActivate: [AuthGuard] },
  {
    path: 'admin',
    component: AdminComponent,
    canActivate: [AuthGuard],
    children: [{ path: 'team', component: TeamComponent }],
  },

  { path: '', redirectTo: 'home', pathMatch: 'full' },
];

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

所以，team组件是Admin组件的子组件，Admin组件中有一个导航栏，它将在.中呈现团队组件。

管理组件代码：

<app-nav-admin></app-nav-admin>

<router-outlet></router-outlet>

导航栏href到team组件HTML的代码：

   <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link" href="admin/team">Team management</a>
        </li>
        <li class="nav-item">
          <a class="nav-link">Link</a>
        </li>
      </ul>
    </div>

单击team链接后的结果：

​

正如您在href值中所看到的，我将“admin/ team”分配到了team组件中，它确实有效，但这是最佳实践吗？

谢谢你们！

Answer 1

你快到了。但是，如果在一个页面上您需要FormsModule，因为您希望在模板中使用NgModelDirective，那么您将为AppModule中的每个页面加载FormsModule，即使您不需要它。最佳实践是实现路由级别的代码分割，例如。每页使用一个模块。

您可以使用以下命令生成页面：

ng g module register --module account --route account

这将生成一个模块和组件，允许您分离依赖项。完整的例子：

cd app
ng g module pages --module app --route /
cd pages
ng g module account --module pages --route account
cd account
ng g module register --module account --route register
ng g module login --module account --route login
ng g module profile --module account --route profile

请确保

在AppModule

• the中导入的PagesModule是not在AccountModule

中导入的是not，LoginModule和ProfileModule是E 123不是e 224。

它还允许您有一个共享的html横幅或片段，无论何时您在任何有关的页面，例如帐户设置。在您的例子中，这将在admin.componrnt.html中实现。

<app-nav-admin></app-nav-admin>
<router-outlet></router-outlet>

您会注意到，您的main.xxxxxx.js (主包)的大小会急剧减少，所以您的应用程序将加载得更快。但是，在导航时，其他页面所需的其他模块尚未加载，因此您将遇到延迟。要解决这个问题，可以在preloadingstrategy: PreloadAllModules调用的选项中使用RouterModule.forRoot() (app-routing.module.ts)

还请注意，生成的AccountRoutingModule有以下路由：

const routes: Routes = [
  { path: 'login', loadChildren: () => import('./login/login.module').then(m => m.LoginModule) },
  { path: 'register', loadChildren: () => import('./register/register.module').then(m => m.RegisterModule) },
  { path: 'profile', loadChildren: () => import('./profile/profile.module').then(m => m.ProfileModule) },
];

import('')指令使模块解耦，同时仍然允许强类型检查.因此，这些模块不需要在import中编辑AccountModule。

作为一个侧面，你可以你灯塔，这是内置的Chrome，以评估您的网站。它将检测到您有一个有角度的应用程序，其中一个建议是使用路由级别的代码分割。因为灯塔检测到整个javascript应用程序是一次加载的，包括当时不需要的模块。要使用灯塔，在Chrome中只需按F12键打开开发工具，就会有一个选项卡灯塔。

Answer 2

您的方法是可行的，但我建议您在项目中使用模块(https://angular.io/guide/feature-modules)来实现良好的功能。

例如，您可以有一个管理模块，这个模块将有自己的路由器。通过这种方式，您可以更多地控制路由和子组件，还可以实现延迟加载。