通过路由器角度传递数据 - TypeScript

路由器是一个重要的概念，可以帮助我们控制应用程序流程，并在多个页面之间传递数据。 在TypeScript中，使用路由器传递数据非常简单，本文将介绍如何实现这一点。

安装和配置

首先，你需要安装相关的依赖，包括@angular/core和@angular/router。 在你的应用程序模块中导入路由器模块，同时建立相关的路由配置。

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

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: MyComponent },
  { path: 'detail/:id', component: DetailComponent }
];

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

在上面的代码中，我们定义了两个路由，一个是默认的重定向到首页，另一个是详情页，详情页定义了一个名为id的参数，这个参数可以在组件中使用。

导航到路由和传递数据

有几个不同的方法可以导航到路由，并且可以传递各种类型的数据。 最基本的方法是使用routerLink指令，在视图中创建超链接。

<a routerLink="/home">Home</a>
<a routerLink="/detail/1">Detail</a>

还可以使用router.navigate方法来在代码中导航到路由，同时传递参数。

import { Router } from '@angular/router';
 
export class MyComponent {
  constructor(private router: Router) { }
 
  goToDetail(id: number): void {
    this.router.navigate(['/detail', id]);
  }
}

在上面的代码中，我们注入了Router服务，并使用navigate方法来导航到详情页，同时传递了一个名为id的参数。

在组件中获取路由参数

在详细组件中，我们可以使用ActivatedRoute服务来获取路由参数。

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

@Component({
  selector: 'app-detail',
  templateUrl: './detail.component.html',
  styleUrls: ['./detail.component.css']
})
export class DetailComponent implements OnInit {
  id: number;
 
  constructor(private route: ActivatedRoute) { }
 
  ngOnInit() {
    this.id = +this.route.snapshot.paramMap.get('id');
  }
}

在上面的代码中，我们注入了ActivatedRoute服务，并使用snapshot.paramMap来获取路由参数id，然后将其转换为数字类型。

结论

这篇文章涵盖了TypeScript中如何通过路由器传递数据。 我们已经介绍了如何安装和配置路由器，如何导航到路由以及如何在组件中获取路由参数。 所有这些都是对于开发Angular应用程序非常重要的知识点。