[英]data-target - Angular
我直接使用HTML显示dialog
<!-- Dialog -->
<div class="modal fade" id="exampleModalCenter" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="exampleModalLongTitle">Something went wrong</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h5 class="modal-title" id="exampleModalLongTitle">Maximum 10 messages selected</h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Ok</button>
</div>
</div>
</div>
</div>
<button data-toggle="modal" data-target="#exampleModalCenter">RunIt</button>
但我想做些以前的事情,所以我想使用(click)
通过javascript执行data-toggle="modal" data-target="#exampleModalCenter"
所以基本上这是步骤:
1- (click)="test()"
2-通过test()
javascript执行data-toggle="modal" data-target="#exampleModalCenter"
为了获得包含它的DIV
,我尝试过:
test(){
var dialog= <HTMLDivElement>document.getElementById(exampleModalCenter);
}
但我找不到exampleModalCenter
您应该使用attr.data-target
<button data-toggle="collapse"
[attr.data-target]="'#exampleModalCenter">RunIt
</button>
首先,您必须在按钮上添加点击方法“测试”。 将模态的类名更改为“ modal fade”。 然后,您的ts文件必须是这样的:
@ViewChild('exampleModalCenter') exampleModalCenter;
test() {
this.exampleModalCenter.nativeElement.className = 'modal fade show';
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.