打字稿中的Angular 7 Hide bootstrap modal [英] Angular 7 Hide bootstrap modal in typscript
本文介绍了打字稿中的Angular 7 Hide bootstrap modal的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想在打字稿组件的功能之一内调用MDBootstrap Modal的(click)="basicModal.hide()"方法.我不知道如何从组件访问此方法.
I want to call (click)="basicModal.hide()" methode of MDBootstrap Modal inside one of my fuctions in my typescript component. I don't know how to access this method from component.
<button type="button" mdbBtn color="primary" class="relative waves-light" (click)="basicModal.show()" mdbWavesEffect>Launch demo modal</button>
<div mdbModal #basicModal="mdbModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myBasicModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close pull-right" aria-label="Close" (click)="basicModal.hide()">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title w-100" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" mdbBtn color="secondary" class="waves-light" aria-label="Close" (click)="basicModal.hide()" mdbWavesEffect>Close</button>
<button type="button" mdbBtn color="primary" class="relative waves-light" mdbWavesEffect>Save changes</button>
</div>
</div>
</div>
</div>
推荐答案
您必须使用Angular的@ViewChild装饰器以mdbModal Directrive为目标,然后使用ModalDirective类中的hide()方法.
You have to use the Angular's @ViewChild decorator to target the mdbModal directrive, and then use the hide() method from ModalDirective class.
请看下面的代码,其中解释了所有内容:
Please take a look at the below code, there's explained everything:
.html:
<button type="button" mdbBtn color="primary" class="relative waves-light" (click)="basicModal.show()" mdbWavesEffect>Launch demo modal</button>
<div #modal mdbModal #basicModal="mdbModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myBasicModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close pull-right" aria-label="Close" (click)="basicModal.hide()">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title w-100" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class="md-form">
<input type="text" class="form-control" id="input1" mdbInput>
<label for="input1">Modal input</label>
</div>
</div>
<div class="modal-footer">
<button mdbBtn color="primary" mdbWavesEffect (click)="hideModal()">Hide modal</button>
</div>
</div>
</div>
</div>
.ts:
@ViewChild(ModalDirective) modal: ModalDirective;
hideModal() {
this.modal.hide();
}
如果有不清楚的地方,请再次询问!
If there will be something unclear, feel free to ask again!
这篇关于打字稿中的Angular 7 Hide bootstrap modal的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文