Angular路由组件中的数据传递：5种最佳方法

如何在Angular路由组件中传递数据：TypeScript完整指南

每个开始使用Angular的开发者，迟早都会遇到这个问题：“如何通过路由器将一个组件中的数据传递到另一个组件？”。在Stack Overflow上，这个问题获得了数千次浏览——这并非偶然。与普通的父子组件不同，在父子组件中只需使用@Input()和@Output()即可，而Angular中的路由则增加了其自身的复杂性。

在本文中，我们将探讨在Angular路由组件中传递数据的5种经过验证的方法。您将了解何时使用哪种方法，并获得现成的TypeScript示例。我们开始吧！

为什么不能直接通过@Input传递数据？

许多新手会尝试这样做：

// ❌ 这样不行<router-outlet [someData]="data"></router-outlet>

Angular Router会动态创建组件。router-outlet是一个指令，而不是一个模板元素。因此，无法直接通过属性传递数据。但是有一些变通方法——而且它们甚至更方便！

方法1：使用Router State（最简单）

最直观的方法是在导航时通过state对象传递数据。此方法从Angular 7+开始可用，并且“开箱即用”。

工作原理

您在调用router.navigate()或通过routerLink时传递一个包含数据的对象。

// 组件A — 发送方import { Component } from '@angular/core';import { Router } from '@angular/router';

@Component({  selector: 'app-user-list',  template: `    <button (click)="goToDetails()">打开用户</button>  `})export class UserListComponent {  constructor(private router: Router) {}

  goToDetails() {    this.router.navigate(['/user', 42], {      state: { name: '伊万·彼得罗夫', role: 'admin' }    });  }}

// 组件B — 接收方import { Component, OnInit } from '@angular/core';import { Router } from '@angular/router';

@Component({  selector: 'app-user-details',  template: `    <div *ngIf="userData">      <h2>{{ userData.name }}</h2>      <p>角色: {{ userData.role }}</p>    </div>  `})export class UserDetailsComponent implements OnInit {  userData: any;

  constructor(private router: Router) {    // 从导航历史记录中获取数据    this.userData = this.router.getCurrentNavigation()?.extras?.state;  }

  ngOnInit() {    // 替代方法——通过history.state    if (!this.userData) {      this.userData = history.state;    }  }}

优点和缺点

• ✅ 实现简单
• ✅ 数据在URL中不可见
• ✅ 适用于任何数据类型（对象、数组）
• ❌ 刷新页面时数据会丢失
• ❌ 无法通过直接URL访问工作

何时使用：用于传递临时数据，这些数据在重新加载时并不关键（例如，闪存消息、过滤器）。

方法2：Route Resolver（用于预加载数据）

如果您需要在组件显示之前加载数据，请使用Angular Resolver。这是一个在激活路由之前解析数据的服务。

创建Resolver

// user.resolver.tsimport { Injectable } from '@angular/core';import { Resolve, ActivatedRouteSnapshot } from '@angular/router';import { Observable, of } from 'rxjs';

@Injectable({ providedIn: 'root' })export class UserResolver implements Resolve<any> {  resolve(route: ActivatedRouteSnapshot): Observable<any> {    const userId = route.paramMap.get('id');    // 模拟