如何将数据从父组件传递到ngZorros中的模态

Question

我是 ant ng-Zorros 的新手，我需要将数据从组件发送到模态，我尝试使用 ngzorros 的文档，但无法发送数据。我有一个表组件，其中 iam 的列名为颜色，如果我们单击颜色列中的显示更多，模态必须打开，在该模态中我需要在模态中显示颜色数据，模态正在打开，但没有找到任何将数据从表组件发送到模态组件的内容。任何建议都会有帮助

item-table.html
----------------
   <td  ><a  nz-tooltip="Click To Open" class="text-color" (click)="showModal(data.color)">Show More </a></td>

item-table.ts
----------------
   showModal(data:any) {
      console.log(data);
      
      const modal = this.modal.create({
        nzTitle: '',
        nzContent: ItemModalComponent,
        nzViewContainerRef: this.viewContainerRef,
        nzClosable: false,
       
      })
    }

item.modal.ts
-------------------
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-item-modal',
  templateUrl: './item-modal.component.html',
  styleUrls: ['./item-modal.component.less']
})
export class ItemModalComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
    
  }

}

Answer 1

您必须通过模态服务的“nzComponentParams”将数据传递到模态组件中的“@Input InputData”，您的代码应如下所示

 showModal(data:any) {
  console.log(data);
  const modal = this.modal.create({
    nzTitle: '',
    nzContent: ItemModalComponent,
    nzViewContainerRef: this.viewContainerRef,
    nzClosable: false,
    nzComponentParams: {
      InputData: data
    }
   
  })
}

然后将其安装到您的组件上

export class ItemModalComponent implements OnInit {
  @Input InputData: any;
  constructor() { }
  ngOnInit(): void {
    console.log(InputData);
  }
}

Answer 2

在 Angular v16 及更高版本中使用

nzData

Ng-Zorro v16 已弃用

nzComponentParams

，转而使用

nzData

，因此，如果您在 v16 或更高版本中看到此问题，这应该有效：

 showModal(data:any) {
  const modal = this.modal.create({
    nzTitle: '',
    nzContent: ItemModalComponent,
    nzViewContainerRef: this.viewContainerRef,
    nzClosable: false,
    nzData: { InputData: data }
  })
}

这是模板：

export class ItemModalComponent implements OnInit {
  @Input InputData: any;
  constructor() { }
  ngOnInit(): void {
    console.log(InputData);
  }
}