How to close bootstrap angular modal after redirect?

Question

I am trying to close a boostrap modal after i navigate to a page. However when i navigate to the page the modal stays open. I tried to use the close method from the activeModal class but still stays open. This is my code:

  viewNewLocationPage(): void {
    this.router.navigate(['/locations/new']);
    this.activeModal.close();
  }

Answer 1

Close the modal before you navigate? Navigation happens instantly, so code afterwards doesn't execute. Or subscribe to navigate event and close it on event.

  viewNewLocationPage(): void {
    this.activeModal.close();
    this.router.navigate(['/locations/new']); 
  }

Answer 2

你可以尝试这样做：

this.router.navigate(['/locations/new']).then(() => this.activeModal.close());

Answer 3

You can change the button to a link tag in the html.

eg.

<a [routerLink]="['/home']" class="btn btn-outline-dark" (click)="d('Save click')">Payment</a>

Thia will redirect and close the modal.