angular - 查询参数更改时，路由不更新

Question

在我的应用程序中，有多个链接，其中我有一些 links与相同route但不同 query parameters .

比如说，我有这样的链接:

.../deposits-withdrawals
.../deposits-withdrawals?id=1
.../deposits-withdrawals?id=2&num=12321344

当我在上述其中一条 route 并且从上面提到的另一条路线出发时，路线没有改变。甚至没有像 ngOnInit 这样的功能或 ngOnChanges被调用。我已经从 queryParameters 更改了参数至 matrixParameters但没有成功。我浏览了许多链接和答案。但是，他们都没有解决我的问题。帮我解决这个问题。

谢谢...

编辑:

<button routerLink="/deposits-withdrawals" [queryParams]="{ type: 'deposit' ,'productId': selectedBalance.ProductId}" class="wallet-btns">DEPOSIT {{selectedBalance.ProductSymbol}}</button>
<button routerLink="/deposits-withdrawals" [queryParams]="{ type: 'withdrawal' ,'productId': selectedBalance.ProductId }" class="wallet-btns">WITHDRAW {{selectedBalance.ProductSymbol}}</button>

Answer 1

我曾经遇到过这个问题。你能放一些代码，或者你试过的解决方案吗？我会给你一些对我有用的东西，但你最好给我更多的细节，这样我就可以提供帮助。假设我们在这里:some_url/deposits-withdrawals 我们希望导航，仅更改参数。

    let url = "id=2&num=12321344"
    this.router.navigate(['../', url], { relativeTo: this.route });

希望对您有所帮助:/

===================================编辑==== ==============================

您必须检测查询参数是否已更改。为此，您可以在组件的构造函数中为 queryParameters 更改添加一个监听器。这可以使用您的路由器以这种方式完成:

    constructor(route:ActivatedRoute) { 
        route.queryParams.subscribe(val => { 
            // put the code from ngOnInit here 
        }); 
    }

添加此监听器以检测查询参数更改，意味着您必须将代码从 ngOnInit 函数移至此监听器。每次导航时，它都会被调用。

导航可以使用html导航，也可以使用ts导航。如果你希望它在 html 中，你可以使用:

    <button routerLink="/deposits-withdrawals" [queryParams]="{ type: 'withdrawal' ,'productId': selectedBalance.ProductId }" class="wallet-btns">WITHDRAW {{selectedBalance.ProductSymbol}}</button>