router.component 方法设置路径
时间: 2023-10-08 09:08:54 浏览: 39
在 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。