Angular7 + ng-zorro-antd 踩坑日记

0919

Modal

想封装一个组，其中想要使用antd中的modal

1.在.module.ts中引入

    import { NzModalModule, NzButtonModule } from 'ng-zorro-antd';

注意：不仅要引入NzModalModule,NzButtonModule也是必备模块。为modal中的确认/ 取消按钮都有nz-button的属性

2.使用时想自定义modal样式 在使用过程中，我引入了modal之后，不知道为什么，确认和取消的按钮就没有样式，并且两个btn的位置跟我的预期不符。 所以通过以下操作，强行改变样式，改变btn位置

::ng-deep .ant-modal-content { // 强行改变modal的样式
  .ant-btn{
    width: 105px;
    color: #fff;
  }
  .ant-btn-default{
    background-color: #188bd4;
  }
  .ant-btn-primary{
    background-color: #ff7b70;
  }
}

<nz-modal [(nzVisible)]="isRejectVisible" 
          nzTitle="操作提示" 
          [nzMask]=false
          (nzOnCancel)="handleRejectOk()" // 更换位置的时候记得要同理更换出发的函数
          (nzOnOk)="handleRejectCancel()"
          [nzWidth]="modalWidth" // 设置宽度
          nzOkText='取消'  // 强行更换确认和取消键的位置
          nzCancelText='确认'>
  <p>是否确认？</p>   
</nz-modal>

0927

1. 系统报错：

• 解决方法：
  • 在.module.ts中，从@angular/forms中引入FormsModule.并把它写到对应的imports中