Angular中如何将组件函数参数传递至路由跳转的另一组件

@Input() 只支持存在直接嵌套关系的父子组件传值，你这两个组件是通过路由跳转的独立页面，不存在父子嵌套关系，所以这个方案从原理上就走不通。

方案1：路由查询参数传参（最适配当前场景，优先选） #

实现成本最低，参数会拼在url的?后面，刷新页面值也不会丢，完全匹配你传单个标题字符串的需求：

1. 调整跳转逻辑，两种写法选一种即可：
   • 模板直接绑定（不需要额外写ts点击方法）：

   <!-- 把你原来的卡片点击逻辑替换成这个，cardTitle替换成你每张卡片对应的标题变量 -->
   <mat-card [routerLink]="['/request-consultation']" [queryParams]="{consultTitle: cardTitle}">
     <!-- 卡片原有内容 -->
   </mat-card>
   

   • 保留你已经写的OnMatCardClickEvent方法，在ts里做跳转：

   // list-consultation.component.ts
   import { Router } from '@angular/router';
   constructor(private router: Router) {}
   
   OnMatCardClickEvent(cardTitle: string) {
     // 跳转时把标题作为查询参数带上
     this.router.navigate(['/request-consultation'], {
       queryParams: { consultTitle: cardTitle }
     });
   }
   

2. 在目标的request-consultation组件里接收参数：

   // request-consultation.component.ts
   import { ActivatedRoute } from '@angular/router';
   pageTitle = '默认咨询标题'; // 配置兜底默认值
   constructor(private route: ActivatedRoute) {
     // 订阅路由参数，拿到传入的卡片标题赋值给页面标题
     this.route.queryParams.subscribe(params => {
       this.pageTitle = params['consultTitle'] || this.pageTitle;
     });
   }
   

   最后在request-consultation的模板里直接用{{pageTitle}}绑定到标题位置即可。

方案2：共享服务传参（适合传多字段/复杂对象的场景） #

如果你后续除了标题还要传其他更多卡片相关的配置数据，不想把所有参数都暴露在url里，可以用全局共享服务传值：

1. 新建一个根级别的共享服务：

   // consultation-common.service.ts
   import { Injectable } from '@angular/core';
   import { BehaviorSubject } from 'rxjs';
   
   @Injectable({ providedIn: 'root' })
   export class ConsultationCommonService {
     // 存咨询类型标题的可观察对象
     private readonly consultTypeSource = new BehaviorSubject<string>('默认咨询标题');
     currentConsultType$ = this.consultTypeSource.asObservable();
   
     // 提供更新标题的方法
     setConsultType(title: string) {
       this.consultTypeSource.next(title);
     }
   }
   

2. 在list-consultation组件的点击事件里，先调用服务的setConsultType方法传入卡片标题，再执行路由跳转。
3. 在request-consultation组件里注入这个服务，订阅currentConsultType$就能拿到实时更新的标题值。

   注意：这个方案存在缺陷，用户如果直接打开request-consultation的url、或者手动刷新页面，服务里存的值会重置成默认值，如果要避免这个问题，可以在存值的时候同步存在sessionStorage里做兜底。

不推荐方案说明 #

路由路径参数（把参数拼在路由路径段里，比如/request-consultation/xxx卡片名）不适合你的场景，因为卡片标题是中文字符串，直接拼在路径里会被url编码，导致url可读性很差，只适合传固定的、短的枚举类型参数。

内容的提问来源于stack exchange，提问作者Nipuni Madanayake