Угловая ошибка маршрутизации - модальное всплывающее окно - PullRequest
Новая
       23

Угловая ошибка маршрутизации - модальное всплывающее окно

0 голосов
/ 25 октября 2019

Я работаю в 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']);
  }

1 Ответ

1 голос
/ 25 октября 2019

Вместо перезагрузки страницы вы можете повторно выполнить вызов, который связывает результаты из бэкэнда с вашими клиентами 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'])
});
...