在模式窗口加载后填充this.obj
数据。那么,如何同步数据和模式呢?
Acomponent.ts
this.dialog.showModal(this.referenceNumber);
dialogComponent.ts
export class DialogComponent {
obj:any;
showModal(name:String) {
if(name!==null) {
this.obj=name;
$("#myModal").modal('show');
}
}
hideModal():void {
document.getElementById('close-modal').click();
}
errorModal() {
$("#errorModal").modal('show');
}
}
dialog.html
<div id="myModal" class="modal fade" role="dialog" >
<div class="modal-dialog ">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<p>Record saved Successfully{{obj}}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
答案 0 :(得分:0)
Angular方法是通过javascript控制模态的可见性。
类似这样:
<div *ngIf="showModal" id="myModal" class="modal fade" role="dialog" >
<div class="modal-dialog ">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" (click)="showModal=false">×</button>
</div>
<div class="modal-body">
<p>Record saved Successfully{{obj}}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
请注意按钮上的*ngIf="showModal"
和(单击)事件处理程序。
您的.ts文件需要一个showModal: boolean;
属性,如果您使用的是推送更改检测,则按钮单击处理程序将需要运行更改检测。
编辑: 是的,不要在Angular中使用jQuery。我推荐ng-bootstrap库。