Question

您可以构建具有多条路线的角度应用程序。

导航到页面> queryParams触发订阅。

当我在页面中时，我需要更改页面内的queryParams，而不是再次触发订阅功能。（因为我不希望再次加载数据，因为导航到页面时我已经拥有了数据，所以我只想更改参数而无需触发订阅，因此如果用户点击刷新，页面将使用正确的URL和订阅重新加载功能将作为该页面的新导航）

我知道我可以使用快照，但是我更喜欢使用可选属性。

和想法？

Answer 1

当我在页面中时，我需要更改页面内的queryParams，而不是再次触发订阅功能。

一种解决方案是在组件内部不订阅查询参数，而仅订阅第一个发出的值：

const mySubscription = this.activatedRoute.queryParams // or queryParamMap
    .pipe(
        take(1)
    )
    .subscribe(//...

Answer 2

没有任何代码示例，很难掌握要完成的工作。

如果您依赖于Observable流，则在不触发subscribe()进行响应的情况下进行某些更改是不可能的；这是Observable流的全部功能。

您可以选择执行的操作是，在第一个subscribe()上获得状态的位置；您可以使用tap(data => this._data = data)或subscribe(data => this.data = data)或类似的方法将状态移动到本地。

您可以使用本地浏览器API更改本地状态，并将其反映在浏览器中。本机浏览器API很有可能也会触发回退router的更改，但是我不确定这是如何工作的。

Answer 3

我遇到了相同的用例，我相信这是一个好方法：

this.activatedRoute
  .queryParams
  .pipe(
    // To skip empty object trigger 
    skip(1),
    filter(params => {
      const {
        size,
        page
      } = params;

      if (+size !== this.pageSize) {
        return true;
      }

      if (+page !== this.pageIndex) {
        return true;
      }
    })
  )
  .subscribe(params => {
    // Subscriber will be triggered only if your filter allows.
  });

您将需要一种在初始状态下设置默认值以查找查询参数的方法。

示例：

getTableDefaults(): {
  pageIndex: number,
  pageSize: number
} {
  let pageIndex = 0;
  let pageSize = PAGINATION_CONFIG.limit;

  const routeTableDefaults = this.activatedRoute.snapshot.queryParams;

  if (Object.keys(routeTableDefaults).length) {
    const {
      page,
      size
    } = routeTableDefaults;

    pageIndex = page;
    pageSize = size;
  }

  return {
    pageIndex,
    pageSize
  };
}

Answer 4

我知道已经有一个例外的答案，但可能还有另一种选择。在您的 .ts 文件导入中

import { Location } from '@angular/common';

所以我将使用一个基于项目中编写的代码的示例。

假设您有一个查询参数，用于某些逻辑，例如链接（绑定）到 .html 文件中的输入字段

_searchTerm: string;


get searchTerm() { return this._searchTerm; }
    set searchTerm(value: string) {
        this._searchTerm = value;
        // this._fetchData();
        this.replaceState();
  }

这意味着每次用户在该字段中键入单个字母时，searchTerm-value 都会发生变化，但我们也将使用 replaceState-method 更改浏览器中显示的 url，而不触发导航/订阅，例如

replaceState(replaceString: string = this._searchTerm) { this.location.replaceState('artwork/overview', '?_searchTerm='+replaceString);}

并且图稿/概览实际上是一个字符串片段，用于导航到模块和组件，现在显示的 url 将是

https://(some.website.com)/artwork/overview?searchTerm=WhateverTheUserTypedIntoTheSearchbox

不言而喻，您可以根据需要添加任意数量的参数。

生成的 url 存储在导航历史记录中。所以如果你在导航时使用后退箭头，你实际上可以使用 param 进行数据加载逻辑，如

ngOnInit() {

this.route.queryParams.subscribe(params => {this._searchTerm = params._searchTerm });}

如何在不触发订阅的情况下更改queryParams？

4 个答案: