NG-Alain + Angular11使用ModalHelper实现简单版本弹框，代码超级少，记得模块要引用这个组件

先看一下目录结构

--aa-item

----modal-compment

------modal-compment.component.html

------modal-compment.component.less

------modal-compment.component.ts

----aa-compment

------aa-compment.component.html

------aa-compment.component.less

------aa-compment.component.ts

--aa-item-routing.module.ts

--aa-item.module.ts

aa-item为模块

modal-compments省略了，这个就是弹框组件，正常写就行了

aa-compment为当前需要添加弹框的组件，好了，开始看代码

aa-compment.html

<button nz-button nzType="primary" class="formItem" style="width: 15%;" (click)="test()">test</button>

aa-compment.ts

import { Component, OnInit } from '@angular/core';

import { ModalComponent } from '../modal-compment/modal-compment.component';

import { _HttpClient, ModalHelper } from '@delon/theme';

@Component({

  selector: 'app-aa-compment',

  templateUrl: './aa-compment.component.html',

  styleUrls: ['./aa-compment.component.less'],

})

export class AaComponent implements OnInit {

  constructor(private modal: ModalHelper) {}

  ngOnInit(): void {}

  test1() {

    let params = {

      getDataObj: {

        k1: 'ABC',

        k2: 20,

        k3: '2021/01/10 03:00',

        k4: 104,

        k5: 1,

      },

    };

    this.modal.createStatic(ModalComponent, params, { size: 1366 }).subscribe((formValue) => {});

  }

}

modal-compment

import { Component, OnInit, ViewEncapsulation } from '@angular/core';

import { _HttpClient } from '@delon/theme';

@Component({

  selector: 'app-modal-compment',

  templateUrl: './modal-compment.component.html',

  styleUrls: ['/modal-compment.component.less'],

  encapsulation: ViewEncapsulation.Emulated,

})

export class ModalComponent implements OnInit {

  constructor(

  ) { }

  getDataObj: any = {} // 这个是从父组件获取的数据，放在这里

  ngOnInit(): void {

    console.log(this.record)

  }

}

最后，切记打开 aa-item.module.ts 添加

import { AaComponent  } from './aa-compment/aa-compment.component.component';

import { ModalComponent } from '../modal-compment/modal-compment.component';

const COMPONENTS: Type<void>[] = [ModalComponent,AaComponent];

NG-Alain + Angular11使用ModalHelper实现简单版本弹框，代码超级少，记得模块要引用这个组件的相关教程结束。