Angular路由传值

是指在使用Angular框架开发前端应用时，通过路由传递参数或数据的方法。

Angular中的路由传值可以通过路由路径参数、查询参数、路由状态参数以及共享服务等方式实现。

路由路径参数：可以在路由定义时通过在路由路径中定义占位符来传递参数。例如，定义一个包含参数的路由路径如下：

{ path: 'user/:id', component: UserComponent }

然后在导航到该路径时，可以通过传递参数来访问相应的组件：

this.router.navigate(['user', 1]);

在UserComponent中可以通过ActivatedRoute服务来获取路由参数的值：

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

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.route.params.subscribe(params => {
    console.log(params['id']);
  });
}

查询参数：可以通过在路由路径中使用查询参数来传递数据。例如，定义一个包含查询参数的路由路径如下：

{ path: 'user', component: UserComponent }

然后在导航到该路径时，可以通过传递查询参数来访问相应的组件：

this.router.navigate(['user'], { queryParams: { id: 1 } });

在UserComponent中可以通过ActivatedRoute服务来获取查询参数的值：

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

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.route.queryParams.subscribe(params => {
    console.log(params['id']);
  });
}

路由状态参数：可以在路由导航时通过state属性传递数据。例如，定义一个带有状态参数的路由路径如下：

{ path: 'user', component: UserComponent }

然后在导航到该路径时，可以通过state属性传递数据：

this.router.navigate(['user'], { state: { id: 1 } });

在UserComponent中可以通过ActivatedRoute服务来获取状态参数的值：

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

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  const state = window.history.state;
  console.log(state.id);
}

共享服务：可以通过创建一个共享服务，在组件之间共享数据。例如，创建一个共享服务如下：

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private data: any;

  setData(data: any) {
    this.data = data;
  }

  getData() {
    return this.data;
  }
}

在需要传递数据的组件中，通过注入该共享服务，并调用其方法进行数据传递：

import { Component } from '@angular/core';
import { DataService } from 'path-to-data-service';

@Component({
  selector: 'app-source',
  template: `
    <button (click)="passData()">Pass Data</button>
  `
})
export class SourceComponent {
  constructor(private dataService: DataService) {}

  passData() {
    const data = { id: 1 };
    this.dataService.setData(data);
  }
}

在接收数据的组件中，同样通过注入该共享服务，并调用其方法获取数据：

import { Component } from '@angular/core';
import { DataService } from 'path-to-data-service';

@Component({
  selector: 'app-destination',
  template: `
    <div>{{ data }}</div>
  `
})
export class DestinationComponent {
  data: any;

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.data = this.dataService.getData();
  }
}

以上是几种常见的Angular路由传值的方法。根据实际需求和场景的不同，可以选择适合的方式来传递参数或数据。

推荐的腾讯云相关产品和产品介绍链接地址：