[英]Angular 2+: Opening Bootstrap modal through typescript
Typically, when opening a modal, the function is called through HTML: 通常,打开模式时,将通过HTML调用该函数:
<button class="btn btn-lg btn-outline-primary" (click)="open(content)">Launch demo modal</button>
which would open up the modal: 这将打开模式:
<ng-template #content let-modal>
<div class="modal-header">
<h4 class="modal-title" id="modal-basic-title">Profile update</h4>
<button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="dateOfBirth">Date of birth</label>
<div class="input-group">
<input id="dateOfBirth" class="form-control" placeholder="yyyy-mm-dd" name="dp" ngbDatepicker #dp="ngbDatepicker">
<div class="input-group-append">
<button class="btn btn-outline-secondary calendar" (click)="dp.toggle()" type="button"></button>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark" (click)="modal.close('Save click')">Save</button>
</div>
</ng-template>
However, due to circumstances (I'm using Google Charts and the HTML where I could use (click) = "open(content"
isn't exposed to me), I need to be able to open the modal through javascript/typescript. 但是,由于情况(我正在使用Google Charts和可以使用
(click) = "open(content"
的HTML (click) = "open(content"
对我不公开),我需要能够通过javascript / typescript打开模式。
I attempted to do so like this: 我试图这样做:
open(content) {
this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'}).result.then((result) => {
this.closeResult = `Closed with: ${result}`;
}, (reason) => {
this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
});
}
select(event: ChartSelectEvent) {
this.open(content); //<--Attempt to Open Modal
if ('deselect' === event.message) {
}
else if ('select' === event.message) {
}
}
My attempt doesn't open up the modal. 我的尝试没有打开模式。 So, I think that what I need to do is how to call a
template reference variable (#content)
through typescript but I'm not sure how 因此,我认为我需要做的是如何通过打字稿调用
template reference variable (#content)
,但我不确定如何
You can get a reference to the template with @ViewChild("content")
: 您可以使用
@ViewChild("content")
获得对模板的引用:
@ViewChild("content") private contentRef: TemplateRef<Object>;
and use that variable to open the modal: 并使用该变量打开模式:
this.open(this.contentRef);
See this stackblitz for a demo. 有关演示,请参见此堆叠闪电战 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.