Angular 路由失败 - 模态弹出

Question

我在 Angular 8 工作。我正在使用 NG-BOOTSTRAP 进行造型。

在我的几个组件中，我提供了单击项目上的删除按钮的功能，这会弹出一个带有是或否的模态 window，当单击是时，模态关闭并且路由似乎刷新，没有实际的浏览器刷新 - 这就是我想要的。该列表已正确更新，一切似乎都很好。然后，当我尝试点击我的导航栏中的任何其他路线时，它们都失败了并且页面停留在它所在的位置，直到我刷新浏览器页面 - 此外，URL 栏中的 link 不是更新，我怀疑这是导致页面无法路由到的原因。不确定为什么会发生这种行为。也很郁闷如果可能，寻求一些帮助。谢谢


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

Angular 路由失败 - 模态弹出

Angular Routing Failure - Modal Pop Up

javascript

twitter-bootstrap

angular-routing

angular