javascript Angular Bootstrap：如何关闭模态

Angular bootstrap: how to close modal

提问by Miguel Angel Frias

I′m working with angular 4, firebase and angular bootstrap. I open the modal, which is a user form, and the idea is to close the modal as soon as the user logs in using one of the methods to login (google auth, facebook auth or email and password auth). But I can't find a way to close the modal when needed.

我正在使用 angular 4、firebase 和 angular bootstrap。我打开模态，这是一个用户表单，想法是在用户使用其中一种登录方法（google auth、facebook auth 或电子邮件和密码身份验证）登录后立即关闭模态。但是我找不到在需要时关闭模态的方法。

google auth

谷歌认证

    export class NavComponent implements OnInit {

          @ViewChild('close') public modal: ElementRef;

          constructor() {}


          public openModal(content) {
            this.modalService.open(content).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}`;
            }
          }
         public googleLogin(content): void {
           this.auth.googleAuth().then((res: any) => {
              // close the modal in this moment.
              this.modal.nativeElement.click();
              const user = res.user;
              this.router.navigate(['/gallery']);
            });
         }}

Modal html

模态html

<ng-template #login let-c="close" let-d="dismiss" class="modal-dialog">
  <button #close type="button" class="close" aria-label="Close" (click)="d('Cross click')">
    <span aria-hidden="true">&times;</span>
  </button>
  <div class="modal-body">
    <ngb-tabset>
      <ngb-tab title="Couple">
        <ng-template ngbTabContent>
          <div class="modal-header">
            <h4 class="modal-title">Couple</h4>
          </div>
          <form [formGroup]="loginForm" (ngSubmit)="userlogin(user)" novalidate>
            <div id="couple_login_form" class="login-form">
              <div class="login-field" [ngClass]="{'pattern' : loginForm.controls.email.invalid && loginForm.controls.email.dirty, 'error' : loginForm.controls.email.pristine && loginForm.controls.email.touched, 'focus' : loginForm.controls.email.dirty}">
                <label for="email_login">E-Mail</label>
                <input type="email" formControlName="email" [(ngModel)]="user.email" name="email">
                <div class="message text-center">
                  <p>This field is required</p>
                </div>
                <div class="pattern text-center">
                  <p>Enter a valid email.</p>
                </div>
              </div>
              <div class="login-field" [ngClass]="{'error' : loginForm.controls.password.pristine && loginForm.controls.password.touched, 'focus' : loginForm.controls.password.dirty}">
                <label for="pass_login">Password</label>
                <input type="password" [(ngModel)]="user.password" name="password" formControlName="password">
                <div class="message text-center">
                  <p>This field is required</p>
                </div>
              </div>
              <p class="text-center bottom-msg-login">Don't have an account yet? Download the app für Android or iOS, <br>sign in and create your wedding!</p>
              <button class="submit" type="submit" name="couple" [disabled]="!loginForm.valid">Login</button>
            </div>
          </form>
          <div class="wrapper-social-login">
            <div id="google_login" (click)="googleLogin(login)"></div>
            <div id="facebook_login" (click)="facebookLogin()"></div>
          </div>
        </ng-template>
      </ngb-tab>
      <ngb-tab title="Guests">
        <ng-template ngbTabContent>
          <div class="modal-header">
            <h4 class="modal-title">Guest</h4>
          </div>
          <div id="guest_login_form" class="login-form">
            <div class="login-field">
              <label for="email_login">Name</label>
              <input type="text" name="login_name" id="login_name">
              <div class="message text-center">
                <p>This field is required</p>
              </div>
            </div>
            <div class="login-field">
              <label for="pass_login">Wedding Code</label>
              <input type="password" name="login_code" id="login_code">
              <div class="message text-center">
                <p>This field is required</p>
              </div>
              <div class="pattern text-center">
                <p>Enter a valid code.</p>
              </div>
            </div>
            <p class="text-center bottom-msg-login">Also getting married?Take a look at our packages and create <br> your own wedding within the app!</p>
            <button class="submit" id="guest_login_btn" type="button" name="guest">Login</button>
          </div>
        </ng-template>
      </ngb-tab>
    </ngb-tabset>
  </div>
</ng-template>

采纳答案by Sayan Samanta

Follow this step

按照这一步

import { Component, ViewChild } from '@angular/core';
import { ModalDirective } from 'ngx-bootstrap/modal';

@Component({
  selector: 'demo-modal-child',
  templateUrl: './child.html'
})
export class DemoModalChildComponent {
@ViewChild('childModal') public childModal:ModalDirective;

public showChildModal():void {
  this.childModal.show();
}

public hideChildModal():void {
  this.childModal.hide();
 }
}

    <button type="button" class="btn btn-primary" (click)="showChildModal()">Open child modal</button>
    <div bsModal #childModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
<div class="modal-content">
  <div class="modal-header">
    <h4 class="modal-title pull-left">Child modal</h4>
    <button type="button" class="close pull-right" aria-label="Close" (click)="hideChildModal()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    I am a child modal, opened from parent component!
  </div>
</div>

ngx-bootstrap link here

ngx-bootstrap 链接在这里

Enjoy Happy codeing. Hopefully that helps!

享受快乐编码。希望这有帮助！

回答by mickaelw

You can use ViewChild :

您可以使用 ViewChild ：

In your ts:

在你的 ts 中：

@ViewChild('closeModal') closeModal: ElementRef


@Component({
  ...
})
export class NameComponent extends TicketActionsModal {

  @ViewChild('closeModal') closeModal: ElementRef

  ...

}

When you need to close the modal you call: this.closeModal.nativeElement.click()

当您需要关闭模态时，您可以调用： this.closeModal.nativeElement.click()

For example:

例如：

public googleLogin(content): void {
   this.auth.googleAuth().then((res: any) => {
      // close the modal in this moment.
      this.closeModal.nativeElement.click() //<-- here
      const user = res.user;
      this.router.navigate(['/gallery']);
   });
}

In your html, add #closeModalto the button:

在您的 html 中，添加#closeModal到按钮：

<button #closeModal type="button" class="close" aria-label="Close" (click)="d('Cross click')">
    <span aria-hidden="true">&times;</span>
</button>

回答by Pran R.V

A simple method is to hide buttons

一个简单的方法是隐藏按钮

  <button id="openModalButton" [hidden]="true" data-toggle="modal" data- 
   target="#myModal">Open Modal</button>
  <button id="closeModalButton" [hidden]="true" data-toggle="modal"        
   data-target="#myModal" class="btn btn-default"                          
  data-dismiss="modal">Close</button>

myModal should be the id name of the modal. To open the modal

myModal 应该是模态的 id 名称。打开模态

document.getElementById("openModalButton").click();

To close the modal

关闭模态

document.getElementById("closeModalButton").click();

回答by Srikrushna

Give an ID to button (Modal close cutton)

给按钮一个 ID（Modal close cutton）

let elem = document.getElementById('submitBtn');

let evt = new MouseEvent('click', {
        bubbles: true,
        cancelable: true,
        view: window
    });

elem.dispatchEvent(evt);