no change form value in second select url in angular7

Question

I have a list of categories and I need when I click on the edit button, open the edit form and put the value of that category to edit them.

when I click for the first time its ok and work good but in second click URL change but the value of form not change and need to refresh the page for change value.

Sample Code

this is my routing code :

{
    path: 'categroies', component: ManagegategoriesComponent, children: [
      { path: '', component: AddcategoriesComponent },
      { path: 'edit/:id', component: EditcategoryComponent }
    ]
  }

this html code :

    <div class="CatrgoryTitle col-md-12 col-x-12 col-sm-12 col-lg-12 mt-1">
        <router-outlet></router-outlet>
</div>
<div class="CatrgoryTitle col-md-12 col-x-12 col-sm-12 col-lg-12 mt-4">
        <nz-table #basicTable [nzData]="listOfData" class="table table-responsive">
            <thead>
                <tr>
                    <th>نام دسته</th>
                    <th>عملیات</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let item of basicTable.data">
                    <td>{{item.name}}</td>
                    <td>
                            <button class="btn btn-warning"
                                routerLink="/panel/dashboard/categroies/edit/{{item.id}}">ویرایش</button>
                    </td>
                </tr>
            </tbody>
        </nz-table>
</div>

what's the problem ? how can I solve this problem??

Answer 1

Might be the problem because of routerLink , because on first click you will redirected on edit page and when you again click then the url will not be refresh,

Try below solution for this,

Use router.Navigate() method for this

In .ts,

import { Router } from '@angular/router';

constructor(
        private router: Router
    ) { }

onRedirectToEdit(item){
   this.router.navigate(['/panel/dashboard/categroies/edit', item.id]);
}

In Html,

<td>
    <button class="btn btn-warning" (click)="onRedirectToEdit(item)">ویرایش</button>
</td>

in edit.ts

ngOnInit() {
     this.route.params.subscribe(params => {
      if (params && params['id']) {
        this.id = +params['id'];
      }
    });
  }

Answer 2

As per you have given stackblitz .

You need to subscribe the router parameters on each change

this.route.paramMap.subscribe(res=> {
   this.id = res.get('id');
});

Answer 3

you must use this code in constructor :

private router:ActivatedRoute

 this.router.params.subscribe(routeParams => {
   /// load data
 }