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引起的问题，因为第一次单击时，您将重定向到编辑页面，而再次单击时，URL将不会刷新，

为此尝试以下解决方案，

为此使用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
 }

angular7中第二个选择URL中没有更改表单值

3 个答案: