Question

我正在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']);
  }

Answer 1

您可以重新执行将后端的结果绑定到您的 clients 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'])
});

角路由失败-模态弹出

1 个答案: