下面是一个使用Angular导航和验证的带参数路由的代码示例:
user-details
的组件,用于显示用户详细信息。import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-user-details',
template: `
User Details
ID: {{ userId }}
`,
styles: []
})
export class UserDetailsComponent implements OnInit {
userId: string;
constructor(private route: ActivatedRoute) { }
ngOnInit() {
this.route.params.subscribe(params => {
this.userId = params['id'];
});
}
}
app.module.ts
中定义路由。import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { UserDetailsComponent } from './user-details/user-details.component';
const routes: Routes = [
{ path: 'user/:id', component: UserDetailsComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
app.component.html
中添加一个链接到用户详细信息的路由。Angular Navigation and Validation
这样就可以在导航到/user/:id
路由时显示对应用户的详细信息。例如,导航到/user/1
将显示用户1的详细信息。