以下是一个示例解决方案,展示了如何在app-routing.module.ts
文件中定义两个路径,其中一个路径可以带有:id
参数。
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home.component';
import { DetailsComponent } from './details.component';
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'details/:id', component: DetailsComponent },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
在上面的代码中,我们定义了两个路由路径:
''
,对应于HomeComponent
组件。details/:id
路径,对应于DetailsComponent
组件,并且可以带有一个名为:id
的参数。要使用这些路由路径,需要在根模块中引入AppRoutingModule
:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home.component';
import { DetailsComponent } from './details.component';
@NgModule({
imports: [BrowserModule, AppRoutingModule],
declarations: [AppComponent, HomeComponent, DetailsComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
在上面的代码中,我们将AppRoutingModule
添加到imports
数组中。
现在,当用户访问/details/123
路径时,Angular将加载DetailsComponent
组件,并将123
作为:id
参数传递给该组件。