Angular 7 中的 $location.search() 等效项

Posted 2023-03-13

【中文标题】Angular 7 中的 $location.search() 等效项

【英文标题】：$location.search() equivalent in Angular 7

【发布时间】：2019-07-13 08:01:42

【问题描述】：

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

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

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 中实现这一点？

【问题讨论】：

见angular.io/guide/router

【参考方案1】：

参数在 Angular v7 中完全不同，因为它们是路由的一部分。因此，没有与您想要完成的直接等效的行对行。

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

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

Send data through routing paths in Angular

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

您可以像这样在 html 中设置它们：

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

或者在这样的代码中：

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

【讨论】：

请注意，您可以使用 angular.io/api/router/Router#navigateByUrl 进行命令式导航