Question

我正在将Angular JS迁移到Angular7。我正在查看这段代码，并尝试在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中实现呢？

Answer 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 7的$ location.search（）

1 个答案: