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

Question

I have created steps using angular and prime NG , I would like to add query string within the link of the steps.

I am creating the steps as below -

<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]);
          }
        }
      );
    }

Here I would like to add query string with the link. Please suggest for any way out for the same?

PrimeNG reference - https://primefaces.org/primeng/#/steps

Answer 1

Since Angular's change detection mechanism looks for a reference change, I would recommend using the map function since it returns a new array reference.

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);
        }
    }
})

Using the router link as the following might to the trick

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

Answer 2

I am able to add the query string with prime NG steps link using the below code -

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

complete code would be like below-

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);
    }
}
});