我是ngx-bootstrap中的新手..使用ngx-bootstrap模式..
使用子模态组件(@ViewChild(' childModal')childModal:CommonModalComponent)
我能够创建简单的模态。
要求是在同一页面上显示多个可拖动模态。
EG。页面上的两个按钮。 button1&按钮2。 如果我点击button1而不是相应的modal-1应该显示。 现在modal-1应该保持打开状态,我可以点击button2,它将显示modal2。 现在我可以在同一页面上看到modal1和modal2,并且能够同时拖动两个..?
如何使用ngx-bootstrap?
模态-dailog.component.ts
import {Component,Input, ViewChild} from '@angular/core';
import { ModalDirective } from 'ngx-bootstrap';
@Component({
selector: 'common-modal',
templateUrl: './modal-dailog.component.html',
})
export class CommonModalComponent {
@ViewChild('childModal') public childModal:ModalDirective;
@Input() title?:string;
constructor() {
}
show(){
this.childModal.show();
}
hide(){
this.childModal.hide();
}
}
模态-dailog.component.html
<div id='wrapper'>
<div bsModal #childModal="bs-modal" class="modal fade" role="dialog" aria-labelledby="mySmallModalLabel" [config]="{backdrop: false, ignoreBackdropClick: true}" aria-hidden="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title pull-left">{{title}}</h4>
<button type="button" class="close pull-right" aria-label="Close" (click)="hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<ng-content select=".modal-body"> </ng-content>
<ng-content select=".modal-footer"> </ng-content>
</div>
</div>
</div>
</div>
</div>
parent.component.ts
import {Component, ViewChild, ViewContainerRef} from '@angular/core'
import {CommonModalComponent} from './core/modal-dailog/modal-dailog.component';
@Component({
selector: 'modal-demo',
templateUrl: './parent.component.html',
})
export class demoComponent {
@ViewChild('childModal') childModal: CommonModalComponent;
@ViewChild('childModal2') childModal2: CommonModalComponent;
constructor() {
}
onCancle() {
this.childModal.hide();
}
onCancle2() {
this.childModal2.hide();
}
}
parent.component.html
<button type="button" class="btn btn-primary"
(click)="childModal.show()">Open modal</button>
<common-modal #childModal [title]="'common modal'">
<div class="modal-body">
hii, modal-body 1
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary"
(click)="onCancle()" >Cancle
<span aria-hidden="true">×</span>
</button>
</div>
</common-modal>
<button type="button" class="btn btn-primary"
(click)="childModal2.show()">Open modal2</button>
<common-modal #childModal2 [title]="'common modal2'">
<div class="modal-body">
hii, modal-body 2
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary"
(click)="onCancle2()" >Cancle
<span aria-hidden="true">×</span>
</button>
</div>
</common-modal>