Как программно закрыть модальное диалоговое окно в ngx-modal

Question

Я пытаюсь создать диалоговое окно входа в систему, которое должно закрыться при успешном входе

Я создал компонент входа в систему и вот HTML для него

    <modal #myModal submitButtonLabel="Login" (onSubmit)="onLogin()">
  <modal-header>
    <h1>Login</h1>
  </modal-header>
  <modal-content>
    <form>
      <div class="form-group">
        <label for="username">Username</label>
        <input type="text" class="form-control" id="username" placeholder="enter username"
               [(ngModel)]="user.username" name="username" required>
      </div>
      <div class="form-group">
        <label for="password">Password</label>
        <input type="password" class="form-control" id="password" placeholder="enter password"
               [(ngModel)]="user.password" name="password" required>
      </div>
      <hr/>
      <div class="form-group">
        <div class="row">
          <div class="col-md-1">
            <i class="fa fa-facebook-official"></i>
          </div>
          <div class="col-md-1">
            <i class="fa fa-google"></i>
          </div>
          <div class="col-md-1">
            <i class="fa fa-cc-visa"></i>
          </div>
        </div>
      </div>
    </form>
  </modal-content>
  <modal-footer>
    <button class="btn btn-primary" (click)="myModal.close()">close</button>
  </modal-footer>
</modal>

Как получить ссылку на модальный режим, определенный в html, чтобы я мог закрыть модальный диалог?

Answer 1

То, как вы получили ссылку с #myModal и обработчик кликов myModal.close() должно работать просто отлично.

Вы хотите сделать это в контроллере? В этом случае вы можете использовать @ViewChild('myModal') декоратор.

Answer 2

Я использую ngx-modal-dialog v2.1.3 (подходит для Angular 2-5), и у меня была та же задача - нужно закрыть диалог, например, когда пользователь нажимает пользовательскую кнопку "Отмена". Я обнаружил, что нет способа закрыть точное всплывающее окно, но вы можете закрыть все всплывающие окна (в большинстве случаев открывается только одно всплывающее окно, и это может помочь во многих ситуациях).

Я сделал это в компоненте: 1 шаг, определите ModalDialogInstanceService в вашем конструкторе.

constructor(...,
            private _modalInstanceService: ModalDialogInstanceService) {}

2 шаг, позвоните дальше, когда вам нужно закрыть всплывающее окно

this._modalInstanceService.closeAnyExistingModalDialog();