angular - 是否可以在 routerLink 的 queryParams 中使用常量作为属性名称？

Question

我正在尝试导航到当前页面并更改/添加查询参数“categoryId”。如果我做：

<a
      [routerLink]=""
      [queryParams]="{ categoryId: category!.id }"
      queryParamsHandling="merge"
>

它工作正常，但我有一个查询参数名称的常量，这样如果我想更改它，我不必找到每个实例。

在 component.ts 中，我有以下属性：

categoryIdQueryParamName = QueryParamNames.CATEGORY_ID;

我努力了：

<a
  [routerLink]=""
  [queryParams]="{ {{'"' + categoryIdQueryParamName + '"' }}: category!.id }"
  queryParamsHandling="merge"
>

查看：https ://stackoverflow.com/a/2274327/787958 后，我尝试了：

<a
  [routerLink]=""
  [queryParams]="{ [categoryIdQueryParamName]: category!.id }"
  queryParamsHandling="merge"
>

但是，我仍然遇到编译错误。如果可能，这样做的正确方法是什么？旁注，我知道我可以使用 以编程方式执行此操作(click)，但我正在利用<a [routerLink]>能够右键单击并在新选项卡中打开的好处。

Answer 1

最干净的方法是在 ts 中进行

public get queryParams() {
    const p = {};
    p[QueryParamNames.CATEGORY_ID] = category!.id;
    return p;
}

<a [routerLink]="" [queryParams]="queryParams" queryParamsHandling="merge" >