$location.search() 等效于 Angular 7

本文介绍了$location.search() 等效于 Angular 7的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时送ChatGPT账号..

我正在将 Angular JS 迁移到 Angular 7.我正在查看此代码并尝试在 Angular 7 中实现.

I am migrating Angular JS to Angular 7. I am looking at this code and trying to implement in Angular 7.

在服务中注入了$location，以下方法重置和设置查询参数.

In the service, $location was injected, and the following methods reset and set the query parameters.

function resetAllOptions() {
            // Clears query params
            $location.search('');

}

function setQueryParameters() {
    // Sets query parameters
            $location.search({
                searchType: searchType,
                searchField: searchField,
                searchValue: searchValue,
                searchValueTwo: searchValueTwo,
                searchValueThree: searchValueThree
            });
}

如何在 Angular 7 中实现这一点?

How do I implement this in Angular 7?

推荐答案

参数在 Angular v7 中的处理方式完全不同，因为它们是路由的一部分.所以没有直接的线对线等同于你想要完成的事情.

Parameters are done completely differently in Angular v7 as they are a part of Routing. So there is no direct line to line equivalent of what you are trying to accomplish.

在 Angular v2+ 中，有三种不同类型的参数，所以第一步是定义你想要的类型.

In Angular v2+, there are three different types of parameters, so your first step is to define the type that you want.

这是一篇详细描述不同类型的帖子:

Here is a post that describes the different types in detail:

通过 Angular 中的路由路径发送数据

假设您想坚持使用查询参数:

Assuming you want to stick with Query parameters:

您可以像这样在 HTML 中设置它们:

You can set them in the HTML like this:

          <a [routerLink]="[product.id]"
             [queryParams]="{filterBy: listFilter, showImage: showImage}">
            {{ product.productName }}
          </a>

或者像这样的代码:

this.router.navigate([`/search`],
              {queryParams: {
                     searchType: searchType,
                     searchField: searchField, // ...
               }});

这篇关于$location.search() 等效于 Angular 7的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！