Question

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

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

但它没有显示ModalContentComponent实际消耗该状态的方式。我在调试器中玩过，我从未看到我的组件获取该数据。

如何从组件中访问它？

Answer 1

在创建模态的阶段，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 2

您还可以使用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 3

由于我还不能评论IlyaSurmay的回答......他的解决方案适用于2.0.2（但不是2.0.0）。

Answer 4

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

> dotnet run
-->> 1
Hello
> echo $?
False

只需定义完全相同的命名变量，即const initialState = { data: "Test Data" }; this.modalService.show(ModalContentComponent, {initialState});，即可访问ModalContentComponent中的数据您将能够访问ModalContentComponent.html和ModalContentComponent.ts中的数据值。

Answer 5

set @Input() parameter in the popup component to access the property in initialState

for eg:
in Parent Component

const initialState = { message: 'popup message', title:'popup title'};
let bsModalRef = this.modalService.show(ConfirmPopupComponent, Object.assign({}, this.modalConfig, { class: 'modal-sm', initialState })



in confirmPopupComponent

@Input() message: string = 'Message here...'; // we can set the default value also
@Input() title: string = 'default title';

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

5 个答案: