BDD on TypeScript：编写业务能理解的代码

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

每个开始使用Angular的开发者最终都会面对这个问题："如何通过路由器将数据从一个组件传递到另一个组件？"。在Stack Overflow上，这个问题已经积累了数千次浏览——这并非没有原因。与使用@Input()和@Output()就足够的常规父子组件不同，Angular中的路由增加了自身的复杂性。

在本文中，我们将介绍5种经过验证的Angular路由组件数据传递方法。你将了解何时使用哪种方法，并获取TypeScript编写的可直接使用的示例。让我们开始吧！

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

许多初学者尝试这样做：

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

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

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

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

工作原理

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

// 组件A — 发送方\nimport { Component } from '@angular/core';\nimport { Router } from '@angular/router';\n\n@Component({\n  selector: 'app-user-list',\n  template: `\n    <button (click)="goToDetails()">打开用户</button>\n  `\n})\nexport class UserListComponent {\n  constructor(private router: Router) {}\n\n  goToDetails() {\n    this.router.navigate(['/user', 42], {\n      state: { name: 'Ivan Petrov', role: 'admin' }\n    });\n  }\n}

// 组件B — 接收方\nimport { Component, OnInit } from '@angular/core';\nimport { Router } from '@angular/router';\n\n@Component({\n  selector: 'app-user-details',\n  template: `\n    <div *ngIf="userData">\n      <h2>{{ userData.name }}</h2>\n      <p>角色: {{ userData.role }}</p>\n    </div>\n  `\n})\nexport class UserDetailsComponent implements OnInit {\n  userData: any;\n\n  constructor(private router: Router) {\n    // 从导航历史中获取数据\n    this.userData = this.router.getCurrentNavigation()?.extras?.state;\n  }\n\n  ngOnInit() {\n    // 替代方法 — 通过history.state\n    if (!this.userData) {\n      this.userData = history.state;\n    }\n  }\n}

优点和缺点

\n
• ✅ 实现简单
\n
• ✅ 数据在URL中不可见
\n
• ✅ 适用于任何数据类型（对象、数组）
\n
• ❌ 页面刷新时数据丢失
\n
• ❌ 直接通过URL导航时不起作用
\n

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

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

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

创建Resolver

// user.resolver.ts\nimport { Injectable } from '@angular/core';\nimport { Resolve, ActivatedRouteSnapshot } from '@angular/router';\nimport { Observable, of } from 'rxjs';\n\n@Injectable({ providedIn: 'root' })\nexport class UserResolver implements Resolve<any> {\n  resolve(route: ActivatedRouteSnapshot): Observable<any> {\n    const userId = route.paramMap.get('id');\n    // Im