我正在使用 Angular 4、Firebase 和 Angular Bootstrap。我打开模式，这是一个用户表单，其想法是在用户使用其中一种登录方法（谷歌身份验证、Facebook 身份验证或电子邮件和密码身份验证）登录后立即关闭模式。但我找不到在需要时关闭模式的方法。
谷歌认证
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']);
});
}}
模态 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">×</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>
您可以使用 ViewChild :
在你的ts中：
@ViewChild('closeModal') closeModal: ElementRef
@Component({
...
})
export class NameComponent extends TicketActionsModal {
@ViewChild('closeModal') closeModal: ElementRef
...
}
当您需要关闭您调用的模式时：
this.closeModal.nativeElement.click()例如：
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']);
});
}
在您的 html 中，将
#closeModal<button #closeModal type="button" class="close" aria-label="Close" (click)="d('Cross click')">
<span aria-hidden="true">×</span>
</button>
一个简单的方法是隐藏按钮
<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 应该是模态的 id 名称。 打开模式
document.getElementById("openModalButton").click();
关闭模式
document.getElementById("closeModalButton").click();
按照此步骤操作
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">×</span>
</button>
</div>
<div class="modal-body">
I am a child modal, opened from parent component!
</div>
</div>
给你的关闭按钮一个ID
<button id="ModalClose" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
然后在你的 Typescript 中，你可以使用普通的旧 JS
document.getElementById("ModalClose")?.click();
为按钮提供 ID（模态关闭按钮）
let elem = document.getElementById('submitBtn');
let evt = new MouseEvent('click', {
bubbles: true,
cancelable: true,
view: window
});
elem.dispatchEvent(evt);
使用 NgbModal 类方法“dismissall()”关闭模态框
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
constructor(
private modalService: NgbModal
)
this.modalService.dismissAll();
您可以使用
(click)="modal.close('Done')"例如：
在您的 HTML 中：
<ng-template #removeModal let-modal>
<div class="modal-header bg-primary">
<h6 class="modal-title text-light"
id="deleteModalCenterTitle">
Delete
</h6>
</div>
<div class="modal-body mx-3">
Are you sure?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal"
(click)="doDelete()">
Delete
</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal"
(click)="modal.close('Done click')">
Cancel
</button>
</div></ng-template>
在您的组件中：
开始你的模态：
this.modalService.open(this.removeModal, { centered: true });使用 Bootstrap 5 和 Angular 18
莫代尔
export class MyComponent {
closeModalButton: any;
ngAfterViewInit(){
this.closeModalButton = document.getElementById('closeModal');
}
closeModal():void {
this.closeModalButton.click();
}
}<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-fullscreen-sm-down">
<div class="modal-content bg-darkest">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">My Modal Title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer border-top-0">
<button type="button" class="btn btn-secondary btn-lg" id="closeModal" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary btn-lg">Submit</button>
</div>
</div>
</div>
</div>