I have a Angular 5 project where users navigate to routes like this when clicking on an item.
my_domain/{account_id}/item/{item_id}/open/
my_domain/{account_id}/item/{item_id}/closed/
my_domain/{account_id}/item/{item_id}/snoozed/
Users should be able to change the account_id or item_id. So I want to be able to reload the page only changing the parametes (the ids). How can I achieve this ?
Angular 8
in .component.ts
You can use current url and put param to navigate array
this.router.navigate([this.router.url, 'open']);
or in .component.html
You can use dot as part of url "./youparam" - in this case "./" == current url
< a [routerLink]="['./open']">open</a>
Simple:
import { Router } from '@angular/router';
...
export class YourComponent{
constructor(public router: Router) {
}
...
myRouteMethod(accountId, itemId, endpointUrl){
// Use String literals
this.router.navigate([`/${accountId}/item/${itemId}/${endpointUrl}/`]);
}
}
On your HTML you can have:
<div class="wrap">
<div (click)="myRouteMethod(accountIdSomehow, itemIdSomeHow, 'open')">
open </div>
<div (click)="myRouteMethod(accountIdSomehow, itemIdSomeHow, 'close')"> close </div>
<div (click)="myRouteMethod(accountIdSomehow, itemIdSomeHow, 'other')"> other </div>
</div>
It would be useful to know how you're getting accountId and itemId. Reusable functions will help out, always think of parameters instead of repetition, the trick is adjusting your templates to work dynamically with your component.
(accountId, itemId, endpoint) and modify the navigate as: .navigate([/${accountId}/item/${itemId}/${endpoint}/])