angular8 modal弹窗中实现吸顶操作

angular8 modal弹窗中实现吸顶操作

1 首先在modal弹窗加特殊的行间class 或者 id 作为标记

我是使用class作为标记

const modal = this.modalService.create({
     nzTitle: '变更项目计量',
     nzClassName:'meterageTable', // 标记class
     nzContent: MeterageChangeTableComponent,
     nzWidth: 1200,
     nzFooter: [{
       label: '保存',
       onClick: (scope) => {
         modal.close();
       }
     }, {
       label: '取消',
       onClick: () => {
         modal.close();
       }
     }]
 });

2 然后modal弹窗使用的组件MeterageChangeTableComponent中添加监听

    // 获取modal框
    const modal框 = document.querySelector('.meterageTable').parentNode;
	// 获取监听modal框的滚动事件
    fromEvent(modal, 'scroll').subscribe((e:any) => {
	  // 使用top接受滚动的距离
      this.top = e.target.scrollTop;
    });

3 在html中监听top大小，超出最大值（这个自己计算），切换组件

 <div *ngIf="top<=maxTop" class="table-operations"></div>