在Angular中,可以使用动态路径路由来处理不同参数的路由。下面是一个包含代码示例的解决方法:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{ path: 'user/:id', component: UserComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-user',
template: `
User Details
User ID: {{ userId }}
`
})
export class UserComponent implements OnInit {
userId: string;
constructor(private route: ActivatedRoute) { }
ngOnInit() {
this.route.params.subscribe(params => {
this.userId = params['id'];
});
}
}
User 1
User 2
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
Angular Dynamic Path Routing
Home
`
})
export class AppComponent { }
这样,当点击链接时,Angular将根据动态路径参数加载对应的用户组件,并显示用户ID。