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

Question

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

我的消息弹出模式很好，但是当我单击 cancel 或 ok 时，我得到

未捕获错误：取消不是函数要么未捕获的错误：ok 不是函数

似乎没有跳入承诺，还要注意确定这是否相关，但我的 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' 导入两种不同的 classes（以及其他导出）：DialogService 和 DialogController。

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

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

import {DialogService} from 'aurelia-dialog';

@inject(DialogService)

这些：

import {DialogController} from 'aurelia-dialog';

@inject(DialogController)

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

Dialog popping up but cancel and ok is not a function

javascript

aurelia