Angular 通过替换现有参数导航到 url

Question

在我们的 Angular 应用程序中，我们有一个 DropDown 组件，其中填充了年份。

一旦我们选择了一年，我们需要改变路由器的 url，就像这样：

网址/客户/2015

网址/客户/2016

网址/客户/2017

或

url/customers/some-other-page/2015

url/customers/some-other-page/2016

url/customers/some-other-page/2017

这可行，但我们将下拉菜单的更改事件委托给需要它的组件。没关系！

但我们认为，如果组件自己改变路线，这会让我们的生活更轻松。

我们试过了：

  public onChange(year): void {   
    this.router.([this.router.url, year]);
  }

这仅在第一次有效，第二次网址看起来像这样：

url/customers/some-other-page/2017/2018

第三次：

url/customers/some-other-page/2017/2018/2019

等等……

问题：

那么，如何获取我的路由器的参数并将其替换为当前参数？

Answer 1

以下是有关使用查询参数的一些信息：

然后您可以使用如下语法读取查询参数：

ngOnInit(): void {
    this.listFilter = this.route.snapshot.queryParamMap.get('filterBy') || '';
    this.showImage = this.route.snapshot.queryParamMap.get('showImage') === 'true';
    . . .
}

或者如果您想在查询参数更改时收到通知，您可以执行以下操作：

ngOnInit(): void {
    this.route.queryParamMap.subscribe(params => this.filterBy = params.get('filterBy'));
    . . .
}

注意：来自文档：

两个较旧的属性仍然可用。他们的能力不如 它们的替代品，不鼓励使用，并且将来可能会被弃用 角度版本。

params — 一个包含必需和可选参数的 Observable 特定于路由的参数。请改用 paramMap。

queryParams — 一个包含查询参数的 Observable 可用于所有路线。请改用 queryParamMap。