解决 ng-zorro-antd 升级后 [Modal对话框]
2018-11-30 本文已影响0人
niccky
问题概述
ng-zorro-antd ver 0.6.x 版本使用自动组件创建 Modal 弹出框时,在弹出框与页面之前可以通过 NzModalSubject 对象实例传递数据给页面进而做页面刷新的操作。
ng-zorro-antd:1.x 过后这个功能把干掉了,但这不影响使用其他方式来实现这一需求并兼容原来的代码保持不变。
功能恢复方式
- 在自定义的组件(如:GoodInfoModalComponent)
- 在自定义组件中添加自定义的属性如(subject:Subject)
- 注入 ModalRef 服务(如:private modal: NzModalRef)
- 添加公共代码,如:关闭弹出框(close)
自定义的组件(GoodInfoModalComponent)示例代码如下:
class GoodInfoModalComponent {
subject:EventEmitter<any> = new EventEmitter<any>();
constructor(private modal:NzModalRef){}
addData(data=this.mockData())=>this.subject.next(data);
cancel = ()=>this.close();
mockData = (s=1,e=10) =>Array.from({length:e-s+1},(r,i)=>i+s);
close = (info="destroy")=>this.modal.destroy(info);
}
原来回调处理部分,示例代码如下:
...
openModal = (option,param) =>Object.create(obs=>
const ref = this.modal.create({
...option,
nzComponentParams: {
...param
}
});
let modal:GoodInfoModalComponent = null;
ref.afterOpen.subscribe(r => {
modal = ref.getContentComponent() as modal:GoodInfoModalComponent;
modal.subject.subscribe(s=>obs.next(s));
});
ref.afterClose.subscribe(()=>modal && modal.subject.unsubscribe());
});
...