Angular8-nz-rozzo nz-modal

item

<p (click)="createModalMet()">item</p>

item ts

import { Component, OnInit } from '@angular/core';
import { ModalDragService } from './dragableModal.service'
import { NzModalRef, NzModalService } from 'ng-zorro-antd/modal';
import { SonComponent } from './son/son.component';
@Component({
  selector: 'app-item',
  templateUrl: './item.component.html',
  styleUrls: ['./item.component.less']
})
export class ItemComponent implements OnInit {
 public name:string='itemComponent'
  constructor(
    private modalDragService:ModalDragService,
    private modal: NzModalService
  ) { }
  ngOnInit(): void {
  }
  createModalMet(): void {
   const modal= this.modal.create({
      nzTitle: '标题',
      nzContent:SonComponent,
      nzClosable: false,
      nzComponentParams:{
        name:this.name
      },
      nzFooter:[
        {
          label: '取消',
          type:'default',
          show:true,
          disabled:false,
          onClick: () => {
            modal.close()
          }
        },
        {
          label: '确认',
          type:'primary',
          show:(sonData:any)=>{
            if(sonData.value){
              return true
            }else{
            return false
            }
          },
          disabled:(sonData:any)=>{
            if(sonData.value==2){
              return false
            }else{
            return true
            }
          },
          onClick: (sonData:any) => {
            sonData.sonMet()
            modal.getContentComponent().sonMet()
            this.itemMet(sonData.value,modal)
          }
        }
      ]
    });
    this.modalDragService.enableModalDrag(modal)
  }
  itemMet(value?:string|undefined,modal?:any){
    console.log('itemMet',value);
    console.log('关闭弹窗');
    modal.close()
  }
}

item.module

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { ItemComponent } from './item.component';
import { SonComponent } from './son/son.component';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
  {
    path: '',
    component: ItemComponent,
  },
];

@NgModule({
  declarations: [
    ItemComponent,
    SonComponent,
  ],
  imports: [
    CommonModule,
    FormsModule,
    RouterModule.forChild(routes)
  ],
  entryComponents:[
    SonComponent
  ],
  exports: [RouterModule],
})
export class ItemModule { }

dragableModal.service

import { Injectable, RendererFactory2 } from '@angular/core';
@Injectable({
  providedIn: 'root',
})
export class ModalDragService {
  mouseDownX: number = 0;
  mouseDownY: number = 0;
  modelX: number = 0;
  modelY: number = 0;
  canMove: boolean = false;
  constructor(private randererFactory2: RendererFactory2) {}
  enableModalDrag(refModal: any) {
    const render = this.randererFactory2.createRenderer(null, null);
    const modalBackground = refModal.containerInstance.elementRef.nativeElement;
    const modalElement =
      refModal.containerInstance.elementRef.nativeElement.querySelector( '.ant-modal-content' );
    const modalTitleElement = this.createModalTitleElement(
      render,
      modalElement
    );
    this.dragListen(render, modalTitleElement, modalElement, modalBackground);
  }
  createModalTitleElement(render: any, modalElement: any) {
    let element = document.createElement('div') as any;
    render.setStyle(element, 'width', '100%');
    render.setStyle(element, 'height', '54px');
    render.setStyle(element, 'position', 'absolute');
    render.setStyle(element, 'top', '0');
    render.setStyle(element, 'left', '0');
    render.setStyle(element, 'cursor', 'move');
    render.setStyle(element, '-moz-user-select', 'none');
    render.setStyle(element, '-webkit-user-select', 'none');
    render.setStyle(element, '-ms-user-select', 'none');
    render.setStyle(element, '-khtml-user-select', 'none');
    render.setStyle(element, 'user-select', 'none');
    render.appendChild(modalElement, element);
    return element;
  }
  dragListen(
    render: any,
    modalTitleElement: any,
    modalElement: any,
    modalBackground: any
  ) {
    render.listen(modalTitleElement, 'mousedown', (event: any) => {
      this.mouseDownX = event.clientX;
      this.mouseDownY = event.clientY;
      this.modelX = modalElement.offsetLeft;
      this.modelY = modalElement.offsetTop;
      render.setStyle(modalElement, 'left', `${this.modelX}px`);
      render.setStyle(modalElement, 'top', `${this.modelY}px`);
      this.canMove = true;
    });
    render.listen(modalTitleElement, 'mouseup', (event: any) => {
      this.canMove = false;
    });
    render.listen(modalTitleElement, 'mousemove', (event: any) => {
      if (this.canMove) {
        let moveX = event.clientX - this.mouseDownX;
        let moveY = event.clientY - this.mouseDownY;
        let newModalX = this.modelX + moveX;
        let newModalY = this.modelY + moveY;
        render.setStyle(modalElement, 'left', `${newModalX}px`);
        render.setStyle(modalElement, 'top', `${newModalY}px`);
      }
    });
  }
}

son

<div>
  sonComponent <br>
  value
  <input type="text" [(ngModel)]="value" />
</div>

import { Component, Input, OnInit } from '@angular/core';
@Component({
  selector: 'app-son',
  templateUrl: './son.component.html',
  styleUrls: ['./son.component.less']
})
export class SonComponent implements OnInit {
  @Input('name') name:string | undefined
  public value:number=1
  constructor() { }
  sonMet(){
    console.log('sonMet弹窗事件');
  }
  ngOnInit(): void {
  }
}