RouterModule.forRoot 和 RouterModule.forChild 的区别

本文详细介绍了Angular路由模块的forRoot和forChild方法的区别。forRoot用于创建主模块,包含所有指令、给定路由及路由器服务,而在应用程序的子模块中使用forChild,它仅包含指令和路由,不包括路由器服务。一个应用只能有一个使用forRoot的模块,但可以有多个使用forChild的模块。
摘要由CSDN通过智能技术生成

forRoot creates a module that contains all the directives, the given routes, and the router service itself
forRoot创建一个包含所有指令、给定路由和路由器服务本身的模块

forChild creates a module that contains all the directives and the given routes, but does not include the router service.
forChild创建一个包含所有指令和给定路由的模块,但不包括路由器服务

.forRoot(routes)是父亲,.forChild(routes)是孩子;
一家(一个项目)中只能有一个父亲(forRoot),但可以有多个孩子(forChild)
在这里插入图片描述

在这里插入图片描述
参考链接:https://blog.csdn.net/i042416/article/details/119002384

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Angular 中,我们可以使用 `RouterModule` 模块中的 `forRoot` 和 `forChild` 方法来设置路由。这些方法返回一个 `Routes` 类型的对象,用于定义路由。 在 `RouterModule.forRoot` 方法中,我们可以传入一个 `Routes` 类型的参数,该参数是一个数组,其中每个元素都表示一个路由。例如: ```typescript import { RouterModule, Routes } from '@angular/router'; import { HomeComponent } from './home.component'; import { AboutComponent } from './about.component'; const routes: Routes = [ { path: '', component: HomeComponent }, { path: 'about', component: AboutComponent } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { } ``` 在上述代码中,我们定义了两个路由:空路由和 `/about` 路由,分别对应 `HomeComponent` 和 `AboutComponent` 组件。 我们也可以通过 `forChild` 方法添加子路由,例如: ```typescript import { RouterModule, Routes } from '@angular/router'; import { ProductListComponent } from './product-list.component'; import { ProductDetailComponent } from './product-detail.component'; import { ProductResolve } from './product-resolve.service'; const routes: Routes = [ { path: 'products', component: ProductListComponent, resolve: { products: ProductResolve }, children: [ { path: ':id', component: ProductDetailComponent } ] } ]; @NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule] }) export class ProductRoutingModule { } ``` 在上述代码中,我们定义了一个 `/products` 路由,它包含一个 `ProductListComponent` 组件和一个子路由。子路由使用了动态路由,即路由参数 `:id` 表示产品的 ID。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值