Angular中实现路由跳转并通过get方式传递参数

1. 背景介绍

在Angular应用程序中，实现路由跳转并通过GET方式传递参数是一个常见的需求。路由跳转是指在应用程序的不同页面之间进行切换，而通过GET方式传递参数是指将数据附加到URL的查询字符串中，以便后续页面可以获取并使用该参数的值。

2. 路由配置

在Angular中，路由配置通过RouterModule来实现。为了实现路由跳转和参数传递，我们需要在应用程序的根模块（通常是app.module.ts）中配置RouterModule，并定义路由配置。

2.1 安装RouterModule

首先，我们需要安装RouterModule及其相关依赖。执行以下命令来安装：

npm install @angular/router

2.2 配置路由

在app.module.ts文件中，我们需要导入RouterModule并调用forRoot方法配置路由。我们将定义一个路由数组，每个路由都包含路径、组件和参数：

import { RouterModule, Routes } from '@angular/router';

import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';
const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about/:id', component: AboutComponent },
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
  exports: [RouterModule]
})
export class AppModule { }

在上面的示例中，我们定义了两个路由：一个是根路由（路径为空），对应的组件是HomeComponent；另一个是about路由，路径为'/about/:id'，其中:id表示参数。该路由对应的组件是AboutComponent。

3. 页面导航

在应用程序中的任何地方，我们都可以使用Router服务导航到其他页面。为此，我们需要在组件的构造函数中注入Router服务，并使用其navigate方法进行导航。

3.1 导航到其他页面

要导航到其他页面，我们需要构建一个URL，并使用Router的navigate方法：

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

export class HomeC