Angular2 路由器 - 使用不同参数导航到当前页面

Angular2 路由器：使用不同参数导航到当前页面

typescript
// app.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';
const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  // 添加其他路由规则...
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

typescript
// app.module.ts
const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about/:id', component: AboutComponent },  // 添加动态参数 ':id'
  // 添加其他路由规则...
];

typescript
// about.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
  selector: 'app-about',
  template: `
    
About Component
    
Parameter from URL: {{ userId }}
  `
})
export class AboutComponent implements OnInit {
  userId: string;
  constructor(private route: ActivatedRoute) {}
  ngOnInit() {
    this.userId = this.route.snapshot.paramMap.get('id');
  }
}