Question

我的应用程序中有一个侧面导航栏。侧面导航中的所有图标都指向不同的路线。其中一个图标应指向带有查询参数的路由。示例-localhost:4200/test?t=1。

我的导航项目界面如下所示。

export interface NavigationItem {
  link: string;
  parameters?: string;
  icon: string;
}

我在侧面导航栏中循环显示了这些导航项的数组。数组中的一项是this-

{
    link: 'test',
    parameters: '{t:1}',
    icon: 'newIcon',
  }

这是我的*ngFor中的代码段

<a [routerLink]="[item.link]" [queryParams]="item.parameters" routerLinkActive="active" class="navigation-item">
  <mat-icon matListIcon class="icon">{{ item.icon }}</mat-icon>
</a>

我希望通过点击图标打开路线localhost:4200/test?t=1。但是正在形成的路线是localhost:4200/test?0=%7B&1=t&2=:&3=1&4=%7D

你能告诉我怎么了吗？

Answer 1

这是因为您在parameters上的NavigationItem字段是一个字符串，因此Angular是对其进行URL编码的。

您可以将参数转换为Params类型（强烈建议使用），也可以使用JSON.parse(item.parameters)将字符串转换为对象

您的对象应如下所示：

export interface NavigationItem {
  link: string;
  parameters?: Params;
  icon: string;
}

您可以将其创建为：

const item = {
  link: 'test',
  parameters: {
    t: 1
  },
  icon: 'newIcon',
} as NavigationItem

Answer 2

参数应为Params类型，否则它将对您传入的字符串进行编码以用作URL

export interface NavigationItem {
  link: string;
  parameters?: Params;
  icon: string;
}

const item = {
  link: 'test',
  parameters: { t: 1 },
  icon: 'newIcon',
}

Answer 3

您需要为接口中的parameters分配类型Params

import { Params } from '@angular/router';

export interface NavigationItem {
  link: string;
   parameters?: Params;
   icon: string;
}

Angular现在将参数视为路由器参数，因此避免对其进行编码。

希望这行得通。

Answer 4

提供参数的正确方法是使用Params类型，因为queryParams不接受字符串值。使用here中的解决方案来检查您的示例。

角度9：queryParams在路线URL中添加了额外的字符

4 个答案: