一:所有抽屉尽量以组件的形式编写
二:抽屉全部使用封装的 `DrawerHelper`
~~~
DrawerHelper类提供两个方法创建抽屉:
1.create (点击遮罩区可以关闭)
2.createStatic (点击遮罩区不可以关闭)
this.drawerHelper.create(FormEditComponent, { i }, { size: 'lg' }).subscribe(res => this.load());
参数一:component组件
参数二:传递给组件的参数
参数三:扩展参数,扩展参数是一个对象
扩展参数:
{
size:'lg',
drawerOptions:{抽屉NzDrawerOptions原始参数},
footer:false(是否需要工具条),
footerHeight:55(工具条高度)
}
1.size:提供了sm,md,lg,xl,number指定抽屉大小,响应式只支持非数字值,若值为数值类型,则根据`nzPlacement`自动转化为`nzHeight`或`nzWidth`;
2.若无需要底部工具条,需要指定参数footer: false
~~~
三:交互
1.数据交互
关闭抽屉提供了一种方法
一:`this.NzDrawerRef.close(res);`
关闭方法提供了一个可当作回调的`Observable` ,当调用关闭方法时可传递一个数据,推送到`Observable`对象中,然后就可以在`subscribe`中优雅的处理回调。
```
this.drawerHelper.create(ServiceComponent).subscribe(res => {
//处理回调,回调参数即是传递的数据
this.service.show = true;
this.service.name = res.addr;
this.service.id = res.id;
this.changeRef.markForCheck(); //触发变量检测
});
```
2.自定义抽屉底部
```
<div class="drawer-footer">
// 底部工具条由 `drawer-footer` 包裹
<button nz-button [nzType]="'default'" (click)="cancel()">
Cancel
</button>
<button nz-button [nzType]="'primary'" (click)="ok()">
OK
</button>
</div>
```