In my application, there are multiple links in which I have some links
with the same route
but with different query parameters
.
say, I have links like:
.../deposits-withdrawals
.../deposits-withdrawals?id=1
.../deposits-withdrawals?id=2&num=12321344
When I am in one of the above routes and native to the other route from above mentioned, the route is not changing. Not even any of the functions like ngOnInit
or ngOnChanges
being called.I have changed the parameters from queryParameters
to matrixParameters
but with no success. I have gone through many links and answers. But, none of them solved my problem. Help me how to solve this.
Thank you...
EDIT:
<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>
You can change query params by using "router.navigate" function and pass the query parameters this.router.navigate ( [], { queryParams: {_id: "abc", day: "1", name: "dfd"} }); It will update query params in the current i.e activated route The below will redirect to abc page with _id, day and name as query params
Keeping everything the same and navigating to a different route correctly applies query params, doing push for the same route with new query params does nothing. Sorry, something went wrong.
If you want to replace it in the history instead of adding new value there, you could use { queryParams: queryParams, replaceUrl: true }. EDIT: As already pointed out in the comments, [] and the relativeTo property was missing in my original example, so it could have changed the route as well, not just query params.
Member yyx990803commented Aug 15, 2016 You shouldbe using $router.goto change the query, because you are changing the URL. The query object is just a result of URL change, the URL is the source of truth. It doesn't make sense to mutate the query directly, similar to how you shouldn't try to mutate a computed property.
The ngOnInit()
has to be re-invoked when query parameter is updated. This can be achieved as follow:
import { Router } from '@angular/router';
constructor(private router: Router) {
this.router.routeReuseStrategy.shouldReuseRoute = () => false;
}
I had this problem once. Can you put some code, or solutions you tried? I'll give you something working for me, but you better give me some more details so that I can help. Supposing we are here : some_url/deposits-withdrawals and we wish to navigate , changing only parameters.
let url = "id=2&num=12321344"
this.router.navigate(['../', url], { relativeTo: this.route });
Hope it helps :/
=================================== EDIT==================================
You have to detect that query parameters have changed. And for that, you may add a listener to queryParameters changings in the constructor of your component. This can be done using your router this way :
constructor(route:ActivatedRoute) {
route.queryParams.subscribe(val => {
// put the code from ngOnInit here
});
}
Adding this listener to detect query parameters changes, means you have to move your code from ngOnInit function to this listener. And every time, you navigate, it will be called.
For navigating, you may use html navigation, or ts navigation. If you want it to be in html, you may use :
<button routerLink="/deposits-withdrawals" [queryParams]="{ type: 'withdrawal' ,'productId': selectedBalance.ProductId }" class="wallet-btns">WITHDRAW {{selectedBalance.ProductSymbol}}</button>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With