如何将数据从ModalService传递到组件

Question

我正在尝试使用ngx-bootstrap-modal将数据从一个模态服务传递到一个模态组件。examples显示了以下内容：

this.modalService.show(ModalContentComponent, {initialState});

但它并没有显示ModalContentComponent实际上是如何使用该状态的。我在调试器中尝试过，但我从未看到我的组件获得这些数据。

如何从组件访问它？

Answer 1

您还可以像这样使用BsModalRef content

my-modal.component.ts

export class MyModalComponent {
  public myContent;
  constructor(){}
}

从其他组件调用您的模式

import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
...
    public modalRef: BsModalRef;

    constructor(public modalService: BsModalService){}

    public openModal() {
       this.modalRef = this.modalService.show(MyModalComponent);
       this.modalRef.content.myContent= 'My Modal Content';
    }
...

Answer 2

在创建模式的阶段，initialState中的每个属性都会复制到您作为模式内容传递的组件中。

例如，如果您的initialState如下所示：

const initialState = {
   list: [
     'Open a modal with component',
     'Pass your data',
     'Do something else',
     '...',
     'PROFIT!!!'
   ],
   title: 'Modal with component',
   closeBtnName: 'Close'
 };

然后，所有这些属性都被复制到您的模态内容组件中，并且可以在那里访问它们，您可以像往常一样在模板或ngOnInit中使用它们。通常，这些属性类似于@Input。

示例- https://stackblitz.com/edit/angular-9n2zck?file=app/service-component.ts

Answer 3

在这里，在使用modalService.show中的配置参数发送initialState数据的parentComponent中：

const initialState = {
      data: "Test Data"
    };
    this.modalService.show(ModalContentComponent, {initialState});

通过简单地定义完全相同的命名变量来访问ModalContentComponent中的数据，即，您将能够访问ModalContentComponent.html和ModalContentComponent.ts中的数据值。