ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、视频、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
一:所有抽屉尽量以组件的形式编写 二:抽屉全部使用封装的 `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> ```