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为模块

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

aa-compment.html

<button nz-button nzType="primary" class="formItem" style=" 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) => {});
  }
}

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];