如何在Angular的routerLink中使用含查询参数的完整可变URL？

这个问题我之前也碰到过——Angular的routerLink并不支持直接传入带查询参数的完整URL字符串，它会把整个内容当作路由路径的一部分，而不是自动解析?后面的查询参数。下面给你两种可行的解决办法：

方案一：提前在组件中拆分路径与查询参数 #

在获取到pendingTasks数据后，我们可以手动解析每个task.taskUI，把路径和查询参数拆分开来，存在新的属性里，再在模板中使用：

组件代码： #

// 假设你在组件的初始化或数据获取方法中处理
this.pendingTasks = pendingTasks.map(task => {
  // 用URL API解析完整的URL字符串
  const url = new URL(task.taskUI, window.location.origin);
  const queryParams: {[key: string]: string} = {};
  
  // 提取所有查询参数，顺便去掉参数值里的多余引号
  url.searchParams.forEach((value, key) => {
    queryParams[key] = value.replace(/"/g, '');
  });

  // 返回拆分后的新对象
  return {
    ...task,
    taskPath: url.pathname,
    taskQueryParams: queryParams
  };
});

模板代码： #

<ul class="weekly-weather">
  <li *ngFor="let task of pendingTasks">
    <a [routerLink]="task.taskPath" [queryParams]="task.taskQueryParams">
      <!-- 这里放你的链接文本，比如任务名称 -->
    </a>
  </li>
</ul>

方案二：使用自定义管道解析URL（无需修改原数据） #

如果你不想修改原有的pendingTasks结构，可以写一个Angular管道，专门用来解析带查询参数的URL字符串，在模板中直接使用：

自定义管道代码： #

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'parseRouterUrl'})
export class ParseRouterUrlPipe implements PipeTransform {
  transform(urlString: string): {path: string, queryParams: {[key: string]: string}} {
    const url = new URL(urlString, window.location.origin);
    const queryParams: {[key: string]: string} = {};
    
    url.searchParams.forEach((value, key) => {
      queryParams[key] = value.replace(/"/g, '');
    });

    return {
      path: url.pathname,
      queryParams: queryParams
    };
  }
}

记得在你的模块中声明这个管道，让Angular能识别它。

模板代码： #

<ul class="weekly-weather">
  <li *ngFor="let task of pendingTasks">
    <ng-container *ngIf="task.taskUI | parseRouterUrl as parsedUrl">
      <a [routerLink]="parsedUrl.path" [queryParams]="parsedUrl.queryParams">
        <!-- 链接文本 -->
      </a>
    </ng-container>
  </li>
</ul>

为什么原代码不行？ #

简单来说，[routerLink]的设计是接受路由路径（字符串或数组形式），而[queryParams]专门用来传递查询参数对象。如果你直接把带?的完整URL传给routerLink，Angular会把整个字符串当作路由的路径段（比如把/glaccounts/pending_tasks?taskId=2...当成一个完整的路由路径），自然无法正确解析查询参数。

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