在angular7中第二個選擇網址中沒有更改表單值

Question

我有一個類別列表，當我點擊編輯按鈕，打開編輯表單並輸入該類別的值進行編輯時，我需要這些類別。

當我第一次點擊它確定並且工作正常但是在第二次點擊URL更改但是表單的值沒有改變並且需要刷新頁面以獲得更改值。

示例代碼

這是我的路由代碼：

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

這個HTML代碼：

    <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>

有什么問題 ？ 我怎么解決這個問題？？

Answer 1

可能是因為routerLink問題，因為在第一次點擊時你將在編輯頁面上重定向，當你再次點擊時，網址將不會刷新，

嘗試以下解決方案，

router.Navigate()使用router.Navigate()方法

在.ts，

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

constructor(
        private router: Router
    ) { }

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

在Html中，

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

在edit.ts

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

Answer 2

根據你給stackblitz 。

您需要在每次更改時訂閱路由器參數

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

Answer 3

你必須在構造函數中使用此代碼：

private router:ActivatedRoute

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