Angular Prime NG - 如何在路由器中为 Prime NG 步骤添加查询字符串 link

Question

我已经使用 angular 和 prime NG 创建了步骤，我想在步骤的 link 中添加查询字符串。

我正在创建以下步骤 -

<p-steps [model]="steps" [readonly]="false" [(activeIndex)]="activeIndex"></p-steps>

for (let i = 0; i < this.steps.length; i++) {
      this.steps.push(
        {
          label: this.steps[i].name,
          routerLink: ["step"],
          command: (event: any) => {
            this.activeIndex = i + 1;
            this.clickStep(this.stepss[i]);
          }
        }
      );
    }

在这里我想添加带有 link 的查询字符串。请提出相同的出路？

PrimeNG 参考 -https://primefaces.org/primeng/#/steps

Answer 1

由于 Angular 的变化检测机制寻找引用变化，我建议使用 map 函数，因为它 returns 一个新的数组引用。

this.steps = this.steps.map(step => {
    return {
        label: step.name,
        routerLink: ["step?a=1&b=2"],
        command: (event: any) => {
            this.activeIndex = i + 1;
            this.clickStep(step);
        }
    }
})

使用路由器 link 如下所示

routerLink: ["step?a=1&b=2"]

Answer 2

我可以使用下面的代码添加具有主要 NG 步骤 link 的查询字符串 -

queryParams: { "name": this.plugins[i].name }

完整代码如下-

this.steps = this.steps.map(step => {
return {
    label: step.name,
    routerLink: ["step?a=1&b=2"],
    queryParams: { "name": this.plugins[i].name }
    command: (event: any) => {
        this.activeIndex = i + 1;
        this.clickStep(step);
    }
}
});

Angular Prime NG - 如何在路由器中为 Prime NG 步骤添加查询字符串 link

Angular Prime NG - How to add a query string in the router link for the Prime NG steps

javascript

primeng

angular