Question

我封装了对话框服务以添加一些选项，例如动画，

我试图覆盖关闭功能：

 const closeFunction = dialogRef.close;
 const closeHandler = (dialogResult?: R) => {
        wrapper.animate([keyFrame0, keyFrame100], { duration: 1000, easing: 'ease-out' });
        setTimeout(() => closeFunction(dialogResult), 500);
      };
 dialogRef.close = (dialogResult?: R) => closeHandler(dialogResult);

关闭对话框时出现错误：

TypeError: Cannot set property '_result' of undefined

我还需要做什么？一些约束力？ stackblitz demo

Answer 1

closeFunction的定义方式无效。为了使您的示例正常工作，关闭功能需要接受对话框作为参数，或者在未定义的情况下做出反应。试试这个：

const closeFunction = (dialog?) => {
  if ( dialog ) {
     // Valid dialog
     dialog.close
  } else {
    // Undefined dialog
    console.log( 'Dialog does not exist' );
  }
};

const closeHandler = (dialog?) => {
   closeFunction(dialog)
};

dialogRef.close = (dialog?) => {
   closeHandler(dialog);
}

编辑

上面的代码摆脱了控制台的错误消息，但实际上并未覆盖close函数。我认为无法直接覆盖该函数，但是一种解决方法是定义一个新方法，即customClose，该方法将应用自定义代码，然后关闭对话框。运作方式如下：

// Declare a new method (customClose) on the dialogRef after dialog opens
// This new method stores the logic you want to apply before closing
dialogRef['customClose'] = () => {
   console.log( 'Apply 2 seconds animation here' );
   setTimeout(() => dialogRef.close() , 2000);
}

// Then, on the onNoClick method call the custom method instead
onNoClick(): void {
    this.dialogRef['customClose']();
}

实际的动画部分尚未涵盖。您可以通过检查this stackblitz demo

上的控制台来查看实际运行情况

如何覆盖对话框关闭功能？

1 个答案: