Aurelia Dialog在对话框返回前运行'then'

Question

我有一个视图，它启动一个确认对话框，但不是等待对话框返回结果，而是直接跳转到promise的'then'部分。请参见下面的代码：

ConfirmDialog.ts

import { inject } from 'aurelia-framework'; 
import { DialogController } from 'aurelia-dialog'; 

@inject(DialogController) 
export class ConfirmDialog { 
    private message: string; 
    private controller: DialogController; 

    constructor(controller: DialogController) { 
    this.controller = controller; 
    } 

    public activate(message: string) { 
    this.message = message; 
    } 
} 

ConfirmDialog.html

<template> 
    <div tabindex="-1" role="dialog"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" click.trigger="controller.cancel()" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
      <h4 class="modal-title">Confirmation</h4> 
     </div> 
     <div class="modal-body"> 
      ${message}? 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" click.trigger="controller.cancel()">No!</button> 
      <button type="button" class="btn btn-danger" click.trigger="controller.ok()">Yes</button> 
     </div> 
     </div><!-- /.modal-content --> 
    </div><!-- /.modal-dialog --> 
    </div><!-- /.modal --> 
</template> 

SomeView.ts

import * as moment from 'moment'; 
import { inject, singleton } from 'aurelia-framework'; 
import { DialogService } from 'aurelia-dialog'; 
import { ConfirmDialog } from '../components/modal/confirmDialog'; 
import { InfoDialog } from '../components/modal/infoDialog'; 
import { StateStore } from '../common/StateStore'; 
import { Routing } from '../common/routing'; 

@singleton() 
@inject(Routing, StateStore, DialogService) 
export class SomeView { 
    private routing: Routing; 
    private commonState: StateStore; 
    private dialogService: DialogService; 

    constructor(routing: Routing, stateStore: StateStore, dialogService: DialogService) { 
     this.routing = routing; 
     this.commonState = stateStore; 
     this.dialogService = dialogService; 
    } 

    public someButtonClickHandler(someArg: SomeType) { 
     if (!this.routing.auth.authenticated) { 
     this.routing.router.navigate('#/login'); 
     } 
     this.dialogService.open({ 
     viewModel: ConfirmDialog, 
     model: 
      'Do you wish to continue' 
     }).then((response) => { 
     if (response.wasCancelled) { 
      return; 
     } 

     this.dialogService.open({ 
      viewModel: InfoDialog, 
      model: 'Why is this happening..' 
     }); 
     }); 
    } 
} 

我省略视图的HTML，因为它的工作原理和所有绑定都正确触发。这用于工作，我更新了导致运行时错误的aurelia-bundler，所以我恢复到以前版本的捆绑软件。运行时错误停止了，但现在似乎Promise正在短路。我甚至试图从版本控制中检查项目，并且这种情况一直在发生。尝试清除浏览器缓存以防万一出现问题，但无论我做什么，“为什么会发生这种情况......”总是会在确认对话框发生任何交互之前显示。当我点击InfoDialog上的'确定'时，确认对话框出现在下面，然后单击取消或确定，然后不执行任何操作。

任何帮助，将不胜感激。

Answer 1

这很可能是因为测试版和RC之间的aurelia-dialog对话发生了重大变化。

尝试将this.dialogService.open({...}).then(...)更改为this.dialogService.open({...}).whenClosed().then(...)。

请参阅RC-1的发行说明：https://github.com/aurelia/dialog/releases/tag/1.0.0-rc.1。

还有一个博客帖子在奥里利亚博客：http://blog.aurelia.io/2017/04/27/aurelia-dialog-release-candidate/