Question

您好我可以运行一个基本对话框，但我想保持对话框并自行关闭它。这可能吗？

目前单击“确定”按钮会立即删除对话框。

基本上我希望对话框作为带有用户名/密码的登录框。在登录失败时，我想在对话框上显示错误消息而不是关闭它。

我的模板是

<template>
  <ai-dialog>
    <ai-dialog-header>
    </ai-dialog-header>
    <ai-dialog-body>
      <h2>Username:</h2>
      <input value.bind="auth.username" attach-focus="true" />
      <br />
      <h2>Password:</h2>
      <input value.bind="auth.password" attach-focus="false" />
      <br /><br />
      <span innerhtml.bind="auth.error">No Error</span>
    </ai-dialog-body>
    <ai-dialog-footer>
      <button click.trigger="controller.ok(auth)">Ok</button>
    </ai-dialog-footer>
  </ai-dialog>
</template>

和模型

import {DialogController} from 'aurelia-dialog';

export class Login {
  static inject = [DialogController];
  auth = { username: '', password: '', error: '' };

  constructor(private controller : DialogController){

    this.controller = controller;
  }

  activate(auth){
    this.auth = auth;
  }
}

我从另一个模块打电话，比如

let auth = { username: 'Wade', password: 'Watts', error : ""};

  this.dialogService.openAndYieldController({viewModel: Login, model: auth}).then(controller => {
    // Note you get here when the dialog is opened, and you are able to close dialog  
    // Promise for the result is stored in controller.result property

   controller.result.then((response) => {

      if (!response.wasCancelled) {
        console.log('good');
      } else {
        console.log('bad');
      }

      console.log(response);

    })

  });

由于

Answer 1

是的，它可能 - 而且非常简单，实际上。这里的解决方案是在您想关闭对话框之前（或除非）使用SUBSTR()或controller.ok()。

在您的情况下，我不完全确定您为什么要从按钮调用controller.cancel()，但您可以执行以下操作：

controller.ok()

...并在您的viewModel：

中

<ai-dialog-footer>
  <button click.trigger="tryLogin(auth)">Ok</button>
</ai-dialog-footer>

我希望这是有道理的。从本质上讲，模态中的视图只是另一个Aurelia视图和视图模型对 - 它与应用程序中的任何其他视图没有什么不同。 import {DialogController} from 'aurelia-dialog'; export class Login { static inject = [DialogController]; auth = { username: '', password: '', error: '' }; constructor(private controller : DialogController){ this.controller = controller; } activate(auth){ this.auth = auth; } tryLogin (auth) { myLoginService.login(auth) .then((success) => { if (success) this.controller.ok(auth); }); } }和controller.ok()方法旨在关闭对话框并将控制权返回给调用者。但是，只要您在对话框中，您就可以执行应用程序中其他任何操作。

防止aurelia-dialog关闭

1 个答案: