将动态查询参数传递到锚点标记

Question

我有以下代码

<ng-template #listItem let-itemData="data">
<div class="overlay-card">
<div class="card-header">
  <span class="card-header-text"><i class="fas fa-user"></i></span>
  <h3>{{ itemData.name }}</h3>
</div>
<div class="card-body">
  <div class="card-body-text" *ngFor="let item of itemData.dataList">
    <a [routerLink]="['/users']"
      [queryParams]="{organizationId: item.organizationId, organizationName: item.organizationName, userId: item.id}"
      [innerHTML]="item.name | highlight: searchText">{{ item.name }}</a>
  </div>
</div>
<div class="card-footer">
  <div class="button-container" *ngIf="formattedSearchData.users.length !== searchData?.users.length && formattedSearchData.users.length > 0"
    (click)="loadMoreSearchData('users')">
    <span class="load-button-text">Load</span> <span class="footer-number">({{ searchData?.users.length -
      formattedSearchData.users.length }})</span>
  </div>
</div>
</ng-template>

我的问题在部分

<a [routerLink]="['/users']"
  [queryParams]="{organizationId: item.organizationId, organizationName: item.organizationName, userId: item.id}"
  [innerHTML]="item.name | highlight: searchText">{{ item.name }}</a>

我能传递动态[queryParams]之类的吗

<a [routerLink]="{someDynamicValue}"
  [queryParams]="{organizationId: item.organizationId, organizationName: item.organizationName, {someDynamicValue}: item.id}"
  [innerHTML]="item.name | highlight: searchText">{{ item.name }}</a>

请注意我需要动态值的地方，如果可能的话，请注意如何使用。

Answer 1

我认为您需要将queryParams的生成从模板中移出，如下所示：

this.someDynamicValue = 'user';
this.queryParamString = {
  organizationId: 'organization.id',
  organizationName: 'your own org name',
  [this.someDynamicValue]: 1,
};

然后在您的模板中：

<a [routerLink]="someDynamicValue"
  [queryParams]="queryParamString"
  [innerHTML]="item.name | highlight: searchText">{{ item.name }}</a>