![引导模式]( "引导模式")
本文介绍了如何以角度隐藏引导模式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用引导模式，但是当我从代码隐藏中隐藏它时，它会显示以下错误.
我使用的是 angular6.
代码
<div #exampleModal class="modalfade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"咏叹调隐藏=真">@ViewChild('exampleModal') 公共 exampleModal: ElementRef;this.exampleModal.hide();
错误信息
错误类型错误:this.exampleModal.hide 不是函数
解决方案
您可以在模态对话框中添加关闭按钮 HTML 并添加模板变量 #closebutton
在 ts 代码中，调用 this.closebutton.nativeElement.click(); 关闭模态对话框.
HTML
<h2>模态关闭</h2><!-- 用按钮触发模态--><button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">打开</button><!-- 模态--><div class="modalfade" id="myModal" role="dialog"><div class="modal-dialog"><!-- 模态内容--><div class="modal-content"><div class="modal-header"><button type="button" #closebutton class="close" data-dismiss="modal">×</button><h4 class="modal-title">模态标题</h4>
<div class="modal-body"><p>此处的内容</p>
<div class="modal-footer"><button type="button" class="btn btn-danger" id="closeModal" (click)="onSave()">保存</button>
TS
导出类 AppComponent 实现 OnInit {@ViewChild('closebutton') 关闭按钮；构造函数(私人FB:FormBuilder){}公共 ngOnInit() {}公共 onSave() {this.closebutton.nativeElement.click();}}
演示 https://stackblitz.com/edit/angular-close-bootstrap-modal?file=src/app/app.component.html
更新:
我有另一种没有关闭按钮技巧的解决方案.
第一步你需要通过npm命令安装jquery和bootstrap.
其次需要在组件中添加declare var $ : any;
并且使用可以使用 $('#myModal').modal('hide');onSave() 方法
演示 https://stackblitz.com/edit/angular-model-bootstrap-close?file=src/app/app.component.ts
I am using bootstrap modal but when I hide it from code-behind it shows the error below.
I am using angular6.
Code
<div #exampleModal class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
@ViewChild('exampleModal') public exampleModal: ElementRef;
this.exampleModal.hide();
Error message
解决方案
You can add close button HTML in your modal dialog and add template variable #closebutton
In ts code, you call this.closebutton.nativeElement.click(); to close modal dialog.
HTML
<div class="container">
<h2>Modal Close</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" #closebutton class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Content here</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" id="closeModal" (click)="onSave()">Save</button>
</div>
</div>
</div>
</div>
</div>
TS
export class AppComponent implements OnInit {
@ViewChild('closebutton') closebutton;
constructor(private fb: FormBuilder) { }
public ngOnInit() {
}
public onSave() {
this.closebutton.nativeElement.click();
}
}
Demo https://stackblitz.com/edit/angular-close-bootstrap-modal?file=src/app/app.component.html
Update:
I have another solution without trick on close button.
First step you need install jquery and bootstrap by npm command.
Second you need add declare var $ : any; in component
And use can use $('#myModal').modal('hide'); on onSave() method
Demo https://stackblitz.com/edit/angular-model-bootstrap-close?file=src/app/app.component.ts
这篇关于如何以角度隐藏引导模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
09-02 02:08