跳转传参有几种方式

在 Web 开发中，实现页面跳转并传递参数有多种方式，下面列举了其中常用的几种方式：

1. URL 参数传递

URL 参数传递是最常用的一种方式，其原理是将数据以键值对的形式添加到 URL 中，例如 https://example.com/?id=123。可以通过获取 URL 中的参数来获取传递的数据。在 Angular 中，可以使用 Router 的 navigate 方法来进行页面跳转和 URL 参数传递：

// 跳转到详情页面，并传递 id 参数
this.router.navigate(['/detail'], { queryParams: { id: 123 } });

在详情页面中，可以通过 ActivatedRoute 服务来获取 URL 中的参数：

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.route.queryParams.subscribe(params => {
      this.id = params['id'];
    });
  }

}
路由参数传递
除了 URL 参数传递，还可以使用路由参数传递数据。路由参数是指在路由配置中定义的参数，例如 /detail/: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.route.params.subscribe(params => {
      this.id = +params['id'];
    });
  }

}

在跳转到详情页面时，通过 Router 的 navigate 方法传递路由参数：

3.服务传递数据

除了以上两种方式，还可以使用服务来传递数据。具体实现方式是创建一个服务，该服务中定义一个变量用来存储传递的数据，然后在需要使用该数据的组件中注入该服务即可。在 Angular 中，可以通过服务来实现组件之间的数据共享。

以上三种方式都有其优缺点，具体使用哪种方式取决于实际需求和情况。