如何在 Angular 中使用 QueryParamsHandling

在构建单页应用程序时，通常会更改 URL 而不实际重新加载页面。

当尝试从 URL 访问查询参数时，这可能会产生问题。Angular 中的 QueryParamsHandling 特性可以帮助解决这个问题。QueryParamsHandling 是一种路由策略，允许开发人员控制在 URL 更改时如何处理查询参数。

默认情况下，Angular 会在 URL 更改时重置查询参数。但是，使用 QueryParamsHandling，开发人员可以选择在 URL 更改时保留或合并查询参数。

在 Angular 应用程序中使用 QueryParamsHandling 有几个好处。 

首先，它允许开发人员更好地控制他们的应用程序的行为方式。

其次，它可以使调试和测试应用程序变得更容易，因为查询参数将始终保持一致。

在本文中，我将简要介绍 QueryParamsHandling 及其 angular 类型。

学习目标

• 什么是 QueryParamsHandling ？ 
• QueryParamsHandling 类型或值
• QueryParamsHandling 默认示例
• QueryParamsHandling 合并示例
• QueryParamsHandling 保留示例
• 概括

什么是 QueryParamsHandling？

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

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

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

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

QueryParams 处理类型或值

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

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

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

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

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

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

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

QueryParamsHandling 默认

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

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

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

QueryParams 处理合并 

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

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

QueryParamsHandling 保留

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

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

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

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

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

概括

QueryParamsHandling 是使用 Angular 管理 URL 中的参数的好方法。通过使用此方法，您可以轻松地在 URL 中添加、删除和编辑参数。 

这样可以轻松跟踪您的参数并确保它们始终是最新的。

在 Angular 中使用 queryParamsHandling 有很多优点。它可以帮助您更有效地管理 URL 参数，还可以使您的代码更具可读性。