angular - 使用 ngx-bootstrap modal 将数据传递给 modal
问题描述
我正在使用 angular 8 和 ngx-boostrap 打开模态并将数据从父级传递到模态。但没有按预期工作。我应该怎么做才能让它工作?.. 这是我的stackblitz演示和代码
HTML
<button type="button" class="btn btn-primary" (click)="openModal(template)">Open modal</button>
<ng-template #template>
<div class="modal-header">
<h4 class="modal-title pull-left">Modal</h4>
<button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Just a modal with a {{initialState.data1}}
</div>
</ng-template>
零件
openModal(template: TemplateRef<any>) {
const initialState = {
data1 : 'foo'
}
this.modalRef = this.modalService.show(template, {initialState});
}
解决方案
你可以像这样使用它
HTML
<ng-template #template>
<div class="modal-header">
<h4 class="modal-title pull-left">Modal for data : {{ modalService.config.initialState.data1 }}</h4>
<button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
This is a modal.
</div>
</ng-template>
零件
openModal(template: TemplateRef<any>) {
const user = {
data1 : 'foo'
};
this.modalRef = this.modalService.show(template, {
initialState : user
});
}
还有这个在线DEMO
推荐阅读
- angular5 - Angular 5下拉设置默认值
- mysql - 带有 exress 的 Node.js 处理中间件外部的数据库连接错误
- javascript - jQuery 可拖动 Bootstrap Tooltip 比鼠标慢错误 TypeError: a.$element is null
- javascript - 根据从数据库中获取的数据隐藏/显示多个 div 元素
- unity3d - Vuforia unity uwp Hololens .net 4.6
- polymer - Webcomponent 无法在 IE11 中使用 Polymer 加载
- vba - 如何使用宏 vba 从特定列中删除重复行
- android - React Native 多行TextInput,文本居中
- php - 为什么 call_user_func 和 call_user_func_array() 返回类型之间的区别
- php-7 - 如何正确设置谷歌分析报告 API v4?