Как закрыть bootstrapModal нажатием кнопки «Назад» браузера в Angular 2+ - PullRequest
Новая
       12

Как закрыть bootstrapModal нажатием кнопки «Назад» браузера в Angular 2+

0 голосов
/ 05 ноября 2018

Использование следующего кода для отображения модального загрузчика, но когда пользователь нажимает кнопку возврата браузера, модальный фон остается. Как я могу грациозно закрыть модальный и задний фон? Заранее спасибо. 

<div id="bootstrapModal" #bootstrapModal  class="modal fade" tabindex="-1"  aria-hidden="true"  role="dialog">
  <div class="modal-dialog ">
    <!-- Modal content-->
    <div class="modal-content" style="background-color: #232323">
      <!-- model body section -->
      <div class="modal-body">
      </div>
   </div>
  </div>
</div>

1 Ответ

0 голосов
/ 05 ноября 2018

Сначала вы должны прослушать событие браузера назад. Есть несколько способов сделать это (проверьте это thread для деталей). Здесь я решил воспользоваться услугой Angular Location .
Затем, когда это событие вызвано, вы должны программно закрыть модальное окно. Это можно сделать, используя Bootstrap Modal API , вызывая $('#myModal').modal('hide').

Исходя из вашего фрагмента кода, я предполагаю, что вы используете загрузчик, включив его традиционно (не используя существующую интеграцию с Angular, например ng-bootstrap ).
Вот простой пример Stackblitz , демонстрирующий работающее решение.
Сначала нажмите кнопку, чтобы открыть модальное окно, затем нажмите кнопку возврата браузера и увидите, что модальное окно автоматически закрывается.

Компонент 

import { Component, ElementRef, ViewChild } from '@angular/core';
import { Location } from "@angular/common";

declare const $:any;

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent {
  @ViewChild('modal') modal: ElementRef;

  constructor(private location: Location) {
    // simulate a navigation history adding consecutive hashs
    window.location.hash = 'hash1';
    window.location.hash = 'hash2';
    window.location.hash = 'hash3';

    // when location change...
    this.location.subscribe(location => {
      // ...close popup
      $(this.modal.nativeElement).modal('hide');
    });
  }
}

Template 

<!-- Modal trigger button -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Click me to open modal
</button>

<!-- Modal -->
<div #modal class="modal fade" id="exampleModal" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        Now click on browser previous or next button to see modal closing.
      </div>
    </div>
  </div>
</div>
...