6

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

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

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

如何从组件访问它？

4

6 回答 6

6

您也可以使用BsModalRef content 赞

我的模态组件.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';
    }
...
于 2018-02-08T10:34:29.213 回答
4

在创建模式的阶段，每个属性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

于 2018-02-08T10:19:53.213 回答
4

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

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

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

于 2020-05-28T06:56:04.193 回答
1

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

于 2018-02-16T23:35:10.050 回答
0

在 Angular 11 中，这对我来说很好用

在父组件中

import { Component, OnInit, TemplateRef} from '@angular/core';
import { BsModalRef, ModalOptions, BsModalService } from 'ngx-bootstrap/modal';
import { ModalChildComponent } from '../../shared/modal-child/modal-child.component';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {
  bsModalRef: BsModalRef;
  
  constructor(    private modalService: BsModalService
  ) { 
    this.openModalWithComponent();
  }

  ngOnInit(): void {
  }

     public openModalWithComponent() {
      let initialState = { message: 'popup message', title:'popup title'};
      let modalConfig = { animated: true, keyboard: true, backdrop: true, ignoreBackdropClick: false };
      /* this is how we open a Modal Component from another component */
      this.bsModalRef = this.modalService.show(ModalCalendlyComponent, 
        Object.assign({}, modalConfig, {class: 'modal-sm', initialState
        })
        );
    }

  }

在子组件中

import { Component, OnInit } from '@angular/core';
import { BsModalRef, ModalOptions, BsModalService } from 'ngx-bootstrap/modal';

@Component({
  selector: 'app-modal-child',
  templateUrl: './modal-child.component.html',
  styleUrls: ['./modal-child.component.css']
})
export class ModalChildComponent implements OnInit {
    constructor(
    public bsModalRef: BsModalRef, 
    public options: ModalOptions
  ) {
    console.log(this.options.initialState);
   }

  ngOnInit(): void {

  }

}
于 2021-08-27T12:20:07.160 回答
-1

在弹出组件中设置@Input()参数以访问initialState中的属性

在父组件中：

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

在确认弹出组件中：

@Input() message: string = 'Message here...'; // we can set the default value also
@Input() title: string = 'default title';
于 2020-03-14T05:41:54.800 回答