Angular4 模态对话框问题答案

【问题标题】：Angular4 Modal dialog IssueAngular4 模态对话框问题
【发布时间】：2018-06-08 19:07:12
【问题描述】：

我正在使用 Angular 4。我正在尝试使用 ngx-modal-dialog 在我的应用程序中弹出一个弹出窗口。

我使用的是 IE11 浏览器。以下是我的代码：

在ParentPageComponent.ts文件中，openNewDialog()函数定义如下：

openNewDialog(){
    this.modalService.openDialog
    (
        this.viewRef, 
        {
            title: 'Some modal title',childComponent: SimpleModalComponent
        }
    );
}

ParentPageComponent.ts文件的构造函数定义为

constructor(modalService: ModalDialogService, viewRef: ViewContainerRef){}

我在 app.module.ts 文件中添加了entryComponents

entryComponents:[SimpleModalComponent]

我正在从 ParentPageComponent.html 页面调用 openNewDialog 函数。

从父页面调用openNewDialog 方法时，我无法弹出弹出窗口并收到以下错误。

TypeError: 对象不支持属性或方法 'dialogInit'

对检测问题的任何帮助都会非常有帮助。

【问题讨论】：

能否分享SimpleModalComponent的代码
如果您提到的库不是标准 sdk (ngx-modal-dialog) 的一部分，请提供指向它的链接。

标签： angular internet-explorer-11

【解决方案1】：

根据docs，您需要实现IModalDialog，并且需要在ModalComponent 中定义dialogInit。

查看文档中的这个示例

class MyModalComponent implements IModalDialog {
  actionButtons: IModalDialogButton[];

  constructor() {
    this.actionButtons = [
      { text: 'Close' }, // no special processing here
      { text: 'I will always close', onAction: () => true },
      { text: 'I never close', onAction: () => false }
    ];
  }

  dialogInit(reference: ComponentRef<IModalDialog>, options: Partial<IModalDialogOptions<any>>) {
    // no processing needed
  }
}

【讨论】：

非常感谢。