我正在使用引导程序4模态,后跟 example
下面是模板代码:
<div class="container">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open
</button>
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
Modal body..
</div>
<button type="button" class="btn btn-danger" (click)="save()">Save</button>
</div>
</div>
</div>
</div>
在这里单击open
按钮将打开对话框窗口,在单击save
按钮时将调用save()
方法。在 .ts 中,我已编写save
方法中的一些条件如下:
save(){
if(condition){
......don't close the modal....
} else{
......close the modal....
}
}
如何通过在modal
中调用save()
方法来关闭typescript
?
答案 0 :(得分:2)
在Angular / Typescript中执行此操作的正确方法是使用ViewChild。
首次导入ViewChild
:
import { ViewChild } from '@angular/core';
使用您选择的选择器在您的组件中添加此行:
@ViewChild('myModalClose') modalClose;
在您的html中添加标签myModalClose
(此处定位关闭按钮):
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" #myModalClose class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
...
在您的save()
方法中:
this.modalClose.nativeElement.click();
答案 1 :(得分:1)
您也可以使用ng-bootstrap在组件类中控制所有这些。 ng-bootstrap
在打字稿组件代码中,您需要像这样在构造函数中注入NgbActiveModal:
constructor(public activeModal: NgbActiveModal){}
然后在保存方法中,可以将其关闭:
save(){
if(condition){
......don't close the modal....
} else{
this.activeModal.close();
}
}
答案 2 :(得分:1)
我还有另一种解决方案,没有关闭按钮的窍门。
第一步,您需要通过jquery
命令安装bootstrap
和npm
。
第二步,您需要在组件中添加declare var $ : any;
(重要步骤)
并且可以在$('#myModal').modal('hide');
方法上使用onSave()
演示https://stackblitz.com/edit/angular-model-bootstrap-close?file=src/app/app.component.ts
答案 3 :(得分:0)
使用Ngx引导程序https://valor-software.com/ngx-bootstrap/#/modals
这是ngx引导程序模态的常见组件。
<!-- Contains insides of a host element e.g. button text or link text -->
<ng-content></ng-content>
<!-- Dialog box content -->
<ng-template #modalWrapper>
<!-- Header template -->
<div class="modal-header">
<h3 class="modal-title pull-left">{{ modalTitle }}</h3>
<button type="button" class="close pull-right" aria-label="Close" (click)="closeModal()">
<span aria-hidden="true">×</span>
</button>
</div>
<!-- Body template that consist of provided template reference content -->
<div class="modal-body">
<ng-container [ngTemplateOutlet]="modalContent"></ng-container>
</div>
</ng-template>
Component.ts
export class AppModalComponent implements OnInit, OnChanges {
/** Template Reference that is displayed as part of dialog box content */
@Input('app-modal') public modalContent: TemplateRef<any>;
/** Title of the dialog box */
@Input() public modalTitle: string = '';
/** Defines if modal is open */
@Input() public isOpenByDefault: boolean = false;
/** Modal reference */
public modalRef: BsModalRef;
/** Content config object */
@Input() public config: ModalOptions = {};
/** Event on modal open */
@Output() public open = new EventEmitter<void>();
/** Event on modal close */
@Output() public close = new EventEmitter<void>();
/** Wrapper template reference */
@ViewChild('modalWrapper') public content: TemplateRef<any>;
/** Injects modalService to manipulate modals */
constructor(private modalService: BsModalService) { }
public ngOnChanges(changes: SimpleChanges) {
if (changes.config) {
this.modalService.config = changes.config.currentValue;
}
}
public ngOnInit(): void {
this.isOpenByDefault ? this.openModal() : this.closeModal();
}
/** On click of host element opens a modal with provided modal content */
@HostListener('click')
public openModal(): void {
this.modalRef = this.modalService.show(this.content, this.config);
this.open.emit();
}
/** On click of close button closes the modal */
public closeModal(): void {
if (this.modalRef) {
this.modalRef.hide();
this.close.emit();
}
}
}
用法:
<button [app-modal]="template" modalTitle="Modal Title" [isOpenByDefault]="false" #modalRef>Open modal</button>
<ng-template #template>
<h4>Hello world</h4>
</ng-template>