Question

我正在尝试通过使用参数创建一个应用程序，该应用程序的状态直接在URL中表示。这些参数之一应该是可以选择多个项目的选择标准。更改选择意味着将在url参数中的列表中添加或删除项目。这意味着必须在我要更改的位置知道参数列表。

问题是，在我订阅URL时更改url参数的情况下，url不会改变。我做了一个最小的例子here。我可以在这个问题中提供一些代码，但我认为演示已经足够。

我发现问题可能出在添加参数之前，我需要先订阅这些参数。因此，我尝试建立某种将列表存储在变量中的缓存机制。如果我直接使用该变量而不是参数，则可以使用。但是，这是一种解决方法，会产生其他问题。

此外，如果我有一个不是列表的第二个参数，并且我改变了对list参数所做的所有更改，那么将按预期在URL中显示。

如果您不了解我的问题，请随时问我。

Edit1：如果您查看我的演示，则有一个按钮。我希望如果您单击按钮，参数将被添加到url中。每次单击按钮时，应添加另一个参数，以使URL看起来像这样：https://angular-slnewb.stackblitz.io/?myParameter=0&myParameter=1。

Answer 1

您可以尝试将数组转换为字符串。

@Injectable()
export class MyDataService {
  constructor(private activatedRoute: ActivatedRoute, private router: Router) {}

  public getMyUrlParameter(): Observable<string[]> {
    return this.activatedRoute.queryParams.pipe(map(params => {
      const myParameter = params["myParameter"];
      return myParameter ? myParameter.split(',') : [];
    }));
  }

  public setMyUrlParameter(myParameter: string[]): void {
    const customQueryParams = {};
    customQueryParams["myParameter"] = myParameter.toString();
    this.router.navigate([], {
      queryParams: customQueryParams,
      // preserve the existing query params in the route
      queryParamsHandling: "merge"
    });
  }
}

https://stackblitz.com/edit/angular-negcsk?file=src%2Fapp%2Fmy-data.service.ts

Answer 2

据我所知，您提供的示例中的问题是，单击按钮实际上并没有导航到其他页面。总是一样的路线。在setParameter方法中更改路由时，它将合并queryParams值

public setMyUrlParameter(url: string, myParameter: string[]): void {
    const customQueryParams: Params = {};
    customQueryParams["myParameter"] = myParameter;
    this.router.navigate([url], {
      queryParams: customQueryParams,
      // preserve the existing query params in the route
      queryParamsHandling: "merge"
    });
  }

我在这里创建了一个工作叉-https://stackblitz.com/edit/angular-6-routing-tn8av4

Angular Router更改状态，但url不变

2 个答案: