关于在 Angular 应用里重复调用 RouterModule.forRoot(ROUTES) 的讨论

举报
Jerry Wang 发表于 2023/01/31 09:57:52 2023/01/31
【摘要】 在根应用程序模块 AppModule 中调用 forRoot, 在任何其他模块中调用它,尤其是在延迟加载的模块中,是违背 Angular 路由模块的设计本意的,并且可能会产生运行时错误。

在延迟加载模块中调用 forRoot,后果是将在延迟加载模块注入器中创建所有全局服务的新实例,这将导致不可预知的结果。

仅在根应用程序模块 AppModule 中调用 forRoot, 在任何其他模块中调用它,尤其是在延迟加载的模块中,是违背 Angular 路由模块的设计本意的,并且可能会产生运行时错误。

确保导入 forRoot 方法的结果,而不要将它添加到任何其他@NgModule 列表中。

每个应用程序都有一个起点(根),主路由服务应该用 forRoot 初始化,而特定“子”功能的路由应该用 forChild 额外注册。这对于不必在应用程序启动时加载的子模块和延迟加载模块非常有用,相当于 Angular 开发人员被告知重用 RouterService 而不是注册新服务,后者可能会导致运行时错误。

forRoot 静态方法是为 Angular 应用程序配置根路由模块的方法。 当我们调用 RouterModule.forRoot(routes) 时,意思是在要求 Angular 在全局实例化 Router 类的一个实例。 就像 Angular 创建一个新的基础 AppModule 来导入开发人员定义的所有的功能模块一样,它也提供了 AppRoutingModule 来导入我们在应用程序里定义的所有子路由。

在开发人员通过 Angular CLI 创建的新应用程序中,forRoot 方法实际上已经在 app-routing.module.ts 中使用。 在整个 Angular 应用程序中,只能使用一次 forRoot 方法,这是因为此方法告诉 Angular 在后台实例化 Router 类的实例,并且应用程序中只能有一个路由器。

RouterModule.forChild(routes)

当开发人员使用 forChild 静态方法时,我们基本上是在告诉 Angular,“应用程序中已经有一个 Router 实例可用,所以请向该实例注册所有这些路由。”

forChild 静态方法很有用,因为它通过允许我们在应用程序中保持关注点分离来发挥 Angular 模块功能的核心部分。

假设我们想在应用程序中为用户设置创建一个新的功能模块,这个功能将包含一些路由。将这些路由直接添加到 AppRoutingModule 中不是一个好的设计,这最终会随着应用程序的规模增长而变得难于维护。可以使用 forChild 方法在应用程序中保持关注点分离。 首先,创建一个新的 UserSettingsRoutingModule:

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

import { UserSettingsComponent } from './user-settings.component';
import { UserProfileComponent } from  './user-profile/user-profile.component';

const  routes:  Routes  = [
    {
        path:  'settings',
        component:  UserSettingsComponent,
        children: [
            {
                path:  'profile',
                component: UserProfileComponent 
            }
        ]
    }
];

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

注意上面 forChild 方法的使用。 因为已经使用了 forRoot 方法,所以现在只需要将子路由注册到已经实例化的应用程序路由器。

之后创建 UserSettingsModule:

import { NgModule, CommonModule } from  '@angular/core';
import { UserSettingsRoutingModule } from  './user-settings-routing.module';

@NgModule({
    imports: [
        CommonModule,
        UserSettingsRoutingModule
    ],
    // Configure the rest of your module here
})
export class UserSettingsModule { }
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。