javascript - 弹出对话框但取消并确定不是功能

Question

我通常遵循此处的示例:- https://github.com/aurelia/dialog#using-the-plugin

我的消息可以正常弹出模式，但是当我单击 cancel 或 ok 时，我得到了

Uncaught Error :取消不是函数 或者 Uncaught Error :ok 不是函数

它似乎没有跳入 promise ，还要注意确定这是否相关，但我的 controller.settings 似乎也为空。

在我的prompt.js

import {BindingEngine, inject} from 'aurelia-framework';
import {DialogService} from 'aurelia-dialog';

@inject(DialogService)

export class Prompt {

  constructor(controller){
    this.controller = controller;
    this.answer = null;

    //settings seems to be null as well?
    //controller.settings.lock = false;
    //controller.settings.centerHorizontalOnly = true;
  }
  
  activate(message) {
      this.message = message;
  }
}

在我的prompt.html

<template>
  <ai-dialog>
    <ai-dialog-body>
      <h2>${message}</h2>
    </ai-dialog-body>

    <ai-dialog-footer>
      <button click.trigger="controller.cancel()">Cancel</button>
      <button click.trigger="controller.ok()">Ok</button>
    </ai-dialog-footer>
  </ai-dialog>
</template>

在我的主要组件中

...
import {DialogService} from 'aurelia-dialog';
import {Prompt} from './prompt';


@inject(..., DialogService)

export class Welcome {

    constructor(..., dialogService) {
        this.dialogService = dialogService;
    }


    reset() {
        this.dialogService.open({viewModel: Prompt, model: 'Are you sure you want to reset?' }).then(response => {
            console.log(response);
            if (!response.wasCancelled) {
                console.log('OK');
            } else {
                console.log('cancelled');
            }
            console.log(response.output);
        });
    }
    

  ...

};

Answer 1

您可以从 'aurelia-dialog' 导入两个不同的类(以及其他导出类):DialogService 和 DialogController。

您似乎在 prompt.js 类中导入了 DialogService，但试图将其用作 controller。

只需替换 prompt.js 中的这些行:

import {DialogService} from 'aurelia-dialog';

@inject(DialogService)

这些:

import {DialogController} from 'aurelia-dialog';

@inject(DialogController)