对话框弹出，但“取消”和“确定”不是函数。

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'导入两个不同的类(以及其他导出)：DialogService和DialogController。

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

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

import {DialogService} from 'aurelia-dialog';

@inject(DialogService)

有了这些：

import {DialogController} from 'aurelia-dialog';

@inject(DialogController)