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

Question

我正在尝试使用 ngx-bootstrap-modal 将数据从模态服务传递到模态组件中。该例子表明这一点：

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

但它没有显示ModalContentComponent实际如何消耗该状态。我在调试器中玩过，我从来没有看到我的组件获得这些数据。

如何从组件访问它？

Answer 1

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

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

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

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

您也可以使用BsModalRef content 赞

我的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';
    }
...