时间戳

首页 > 解决方案 > Angular 6 添加查询参数而无需重新加载

angular - Angular 6 添加查询参数而无需重新加载

问题描述

我正在使用自定义管道来过滤属性列表，并希望将选定的过滤器添加到 url，以便我的客户可以共享过滤后的列表

如果我使用它，那么页面将被重新加载：

this.router.navigate([], { relativeTo: this.activatedRoute, queryParams: { county: countyId }, queryParamsHandling: 'merge' });

我试图添加这个，但结果相同（但没有写入浏览器历史记录）：

skipLocationChange: true

所需的功能是，当使用管道时，我更新了查询参数，没有任何问题，这甚至可能吗？

我不想重新加载页面的原因是我有其他不需要重新加载的东西:)

标签： angular

解决方案

如果您导航到使用您已经在其中的相同组件的路由，则不会重新加载该组件。

例如，如果您的 URL 是 siteurl/products 并且您使用查询字符串导航到 siteurl/products，则不会调用 ngOnInit。

您可以通过订阅 queryParams 更改来获得新的查询参数 例如：

constructor(
    private activatedRoute: ActivatedRoute,
) { }

this.activatedRoute.queryParams.subscribe(params => {
    console.log(params);
    // logic after subscribing
});

您还可以手动将查询字符串参数添加到 url，然后使用例如 uri.js: https://medialize.github.io/URI.js/手动解析它们，如果您需要更多的控制。

推荐阅读