TypeScript 中的路由器导航传递参数

在 TypeScript 应用程序中，路由器导航是非常重要的。通过路由器导航，用户可以方便地在应用程序的不同页面之间进行切换。

但是，在某些情况下，可能需要将参数传递给将要导航到的页面。例如，当用户点击列表中的某一项时，可能需要将该项的 ID 传递到详细视图页面，以确保该页面显示正确的数据。

在本文中，我们将介绍如何在 TypeScript 应用程序中使用路由器导航来传递参数。

首先，需要在应用程序的路由模块中定义一个带有参数的路由路径。例如，以下路由路径将允许我们将 ID 作为参数传递给详细视图页面：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DetailComponent } from './detail/detail.component';

const routes: Routes = [
  { path: 'detail/:id', component: DetailComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

在上面的代码中，我们定义了一个名为 detail 的路由路径，它允许我们将 ID 作为参数传递。在这个路由路径中，: 表示这个部分是参数。例如，detail/123 将会将 ID 设置为 123。

接下来，在发送路由器导航时，我们需要将参数作为一个对象传递给 navigate 方法。例如，以下代码将在导航到详细视图页面时传递 ID 参数：

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-list',
  template: `
    <ul>
      <li *ngFor="let item of items">
        <a href="#" (click)="gotoDetail(item.id)">{{item.name}}</a>
      </li>
    </ul>
  `
})
export class ListComponent {

  items = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' }
  ];

  constructor(private router: Router) { }

  gotoDetail(id: number) {
    this.router.navigate(['detail', id]);
  }

}

在上面的代码中，我们在 gotoDetail 方法中使用 navigate 方法来导航到详细视图页面。我们将数组 ['detail', id] 作为参数传递给 navigate 方法，其中 id 是我们要传递的参数。这将生成一个路由路径，将 ID 参数与路径中的 : 分隔开来。

最后，在接收参数的详细视图页面中，我们可以使用 ActivatedRoute 服务来获取传递的参数。例如，以下代码将获取传递的 ID 参数：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-detail',
  template: `
    <p>Detail View for ID: {{id}}</p>
  `
})
export class DetailComponent implements OnInit {

  id: number;

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.id = this.route.snapshot.params.id;
  }

}

在上面的代码中，我们使用 ActivatedRoute 服务来获取路由路径中的参数。我们在 ngOnInit 方法中使用 snapshot 属性来获取当前的路由状态，并从 params 属性中获取参数。

通过使用路由器导航来传递参数，我们可以让用户轻松地在应用程序的不同页面之间切换，并且在某些情况下，确保页面显示正确的数据。