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