如何在 Angular 中使用 QueryParamsHandling

什么是 QueryParamsHandling？

QueryParamsHandling 是一个内置的 Angular 路由功能，它允许开发人员在创建或匹配路由时指定如何处理查询参数。它是 Angular 中的一项功能，使开发人员能够指定在路由时应如何处理查询参数。

这对于创建保留表单状态的链接或跟踪分页历史记录等事情很有用。

在构建单页应用程序时，有时我们需要能够控制查询参数的处理方式。默认情况下，Angular 只会将查询参数传递给路由。

但是，有时我们需要能够指定查询参数是可选的还是必需的。这就是 QueryParamsHandling 选项的用武之地。 

QueryParams 处理类型或值

可以使用三种不同的 QueryParamsHandling 值： 

•    合并：这是默认选项，只会将新查询参数与 URL 上已有的任何现有查询参数合并。 

•    保留：此选项将保留 URL 上的所有现有查询参数，并且不会添加任何新参数。 

•    替换：此选项将使用添加的新参数替换任何现有的查询参数。

默认情况下，QueryParamsHandling 设置为“merge”，这意味着任何未在路由定义中指定的查询参数都将被忽略。

但是，开发人员也可以将 QueryParamsHandling 设置为“preserve”，这将在创建或匹配路由时保留当前 URL 中的所有查询参数。

最后，开发人员还可以将 QueryParamsHandling 设置为“空”，这将在创建或匹配路由时从 URL 中删除所有查询参数。

QueryParamsHandling 默认

Angular 提供了一种内置方式来处理我们应用程序中的查询参数。默认情况下，当我们使用路由器导航到新页面时，任何查询参数都会被保留。

这通常是我们想要的行为，因为它允许我们在页面重新加载和转换之间保持状态。 

但是，有时我们可能希望在导航时忽略或重置查询参数。

QueryParamsHandling 默认示例：

import { Component, Input } from "@angular/core";

@Component({
  selector: "hello",
  template: `
    <h1>Default component</h1>

    <button k1:="" queryparams="" routerlink="/a/123" v1="">
      go to a/123
    </button>
  `,
  styles: [
    `
      h1 {
        font-family: Lato;
      }
    `
  ]
})
export class DefaultComponent {}

QueryParams 处理合并 

QueryParamsHandling 合并是 Angular 中的一项新功能，可以更好地管理路由中的查询参数。此功能可用于简化应用程序中查询参数的管理。

QueryParamsHandling 合并可用于自动将查询参数从父路由合并到子路由。当您想要从父路由继承查询参数，但还要向子路由添加其他查询参数时，这可能很有用。

QueryParamsHandling 合并示例：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'a',
  template: `
    >router-outlet<>/router-outlet<
    >button k2:="" queryparams="" queryparamshandling="merge" routerlink="b" v2=""<
      Go to b with queryParamsHandling='merge'
    >/button<
    >br /<
  `,
  styles: [
    `
      h1 {
        font-family: Lato;
      }
    `,
  ],
})
export class AComponent {
  @Input() name: string;

  constructor() {
    console.warn('[AComponent] initialised');
  }
}

QueryParamsHandling 保留

创建 Angular 应用程序时，默认行为是路由器在导航时创建组件的新实例。这在大多数情况下都很好，但有时您需要跨导航保留组件的状态。

这可以通过在路由器配置中使用 QueryParamsHandling 选项来完成。

QueryParamsHandling Preserve 对于分页之类的事情很有用，您希望在其中跨导航维护当前页码。在组件之间移动时保持表单输入值也很有用。

不过，使用 QueryParamsHandlingPreserve 也有一些缺点。一是它可能会导致浏览器历史记录出现问题。

另一个是它会使您的应用程序更难测试和调试。总体而言，最好谨慎使用，并且仅在绝对必要时使用。

QueryParamsHandling 保留示例：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'a',
  template: `
    <router-outlet></router-outlet>

    <button [queryParams]="{ k2: 'v2' }" routerLink="b">
      go to b with queryParamsHandling='preserve'
    </button>
    <br />
  `,
  styles: [
    `
      h1 {
        font-family: Lato;
      }
    `,
  ],
})
export class AComponent {
  @Input() name: string;

  constructor() {
   
  }
}