时间戳

首页 > 解决方案 > 角路由失败 - 模态弹出

javascript - 角路由失败 - 模态弹出

问题描述

我正在使用 Angular 8。我正在使用 NG-BOOTSTRAP 进行样式设置。

在我的几个组件中，我提供了单击项目上的删除按钮的功能，这会打开一个带有“是”或“否”的模式窗口，当单击“是”时，模式关闭并且路线似乎刷新，没有实际的浏览器刷新 -这就是我要的。该列表已正确更新，一切似乎都很好。然后，当我尝试单击导航栏中的任何其他路线时，它们都失败了，并且页面保持在原来的位置，直到我刷新浏览器页面 - 此外，URL 栏中的链接没有更新，我怀疑这是导致无法路由到的页面。不知道为什么会发生这种行为。也很无奈。如果可能的话，寻求一些帮助。谢谢。


THIS IS THE HTML TABLE

<tbody>
              <tr *ngFor="let client of clients">
                <td>{{ client.name | titlecase }}</td>
                <td>{{ client.website }}</td>
                <td>{{ client.phone }}</td>
                <td>{{ client.address.street | titlecase }}, {{ client.address.city | titlecase }}
                  {{ client.address.state | uppercase }}
                  {{ client.address.zip }}</td>
                <td>
                  <button class="btn btn-primary" (click)="editClient(client._id)">
                    <fa-icon [icon]="faEdit"></fa-icon>
                  </button>
                  <button class="btn btn-danger ml-3" (click)="open(content, client)">
                    <fa-icon [icon]="faTrashAlt"></fa-icon>
                  </button>
                </td>
              </tr>
            </tbody>

----- THIS IS THE MODAL TEMPLATE (SAME HTML PAGE)------

<!-- MODAL TEMPLATE -->
<ng-template #content let-modal>
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">Delete Client?</h4>
    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <div class="row">
      <div class="col-sm">
        <button class="btn btn-success mr-3" (click)="deleteClient(modalContent._id)">YES</button>
        <button class="btn btn-danger" (click)="modal.close('Close click')">NO</button>
      </div>
    </div>
  </div>
</ng-template>


----- THIS IS THE TS FILE -----

deleteClient(id) {
    this._clientService.deleteClient(id).subscribe(
      response => {
        console.log(response['message']);

        // Close the modal window and reload the component
        this._modalService.dismissAll();
        this.reloadComponent();
      },
      error => console.log(error['message'])
    );
  }

  ///// MODAL FUNCTIONS
  open(content, client) {
    this.modalContent = client;
    this._modalService
      .open(content, { ariaLabelledBy: 'modal-basic-title' })
      .result.then(
        result => {
          this.closeResult = `Closed with: ${result}`;
        },
        reason => {
          this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
        }
      );
  }

  private getDismissReason(reason: any): string {
    if (reason === ModalDismissReasons.ESC) {
      return 'by pressing ESC';
    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
      return 'by clicking on a backdrop';
    } else {
      return `with: ${reason}`;
    }
  }

  ///// FUNCTION TO RELOAD PAGE AFTER DELETE /////
  reloadComponent() {
    this._router.routeReuseStrategy.shouldReuseRoute = () => false;
    this._router.onSameUrlNavigation = 'reload';
    this._router.navigate(['admin/clients']);
  }

标签： javascriptangulartwitter-bootstrapangular-routing

解决方案

您可以重新执行将结果从后端绑定到客户端var 的调用，而不是重新加载页面。这至少是源和路由的一个很好的分离，并且可以避免进一步的复杂化。

就像是：

deleteClient(id) {
 this._clientService.deleteClient(id).subscribe(
  response => {
    console.log(response['message']);

    // Close the modal window and reload the component
    this._modalService.dismissAll();
    this.getClients();
  }, error => console.log(error['message'])
});

getClients() {
 this._clientService.getClients().subscribe(
  response => {
    this.clients = response.data;
  }, error => console.log(error['message'])
});

推荐阅读