AngularDart 检测组件内的 Keyup 事件

Question

我正在尝试在 material 对话框模式中检测 esc/enter 按键。这是最低设置：

模板：

<modal [visible]="true">
    <material-dialog info headered class="dialog">
        TEST
    </material-dialog>
</modal>

组件：

import 'dart:html';

import 'package:angular/angular.dart';
import 'package:angular_components/angular_components.dart';

@Component(
  selector: 'confirm-purchase-dialog',
  styleUrls: ['confirm_purchase_dialog.css'],
  templateUrl: 'confirm_purchase_dialog.html',
  directives: const [
    MaterialDialogComponent,
    ModalComponent,
  ],
  providers: const [overlayBindings]
)
class ConfirmPurchaseDialogComponent {

  @HostListener('keyup', ['$event'])
  void onKeyUp(KeyboardEvent e) {
    print("KEYUP");
  }
}

我也尝试过@HostListener('keyup')，但没有成功。完全卡住了，非常感谢建议。

Answer 1

弹出窗口（包括对话框）重新设置为 DOM 中的另一个位置，以处理 z 索引问题。因此，您不会从主机中的对话框中获取事件。相反，您可以直接将事件添加到 material-dialog：

模板：

<modal [visible]="true">
    <material-dialog info headered class="dialog" (keyup)="onKeyUp">
        TEST
    </material-dialog>
</modal>

组件：

import 'dart:html';

import 'package:angular/angular.dart';
import 'package:angular_components/angular_components.dart';

@Component(
  selector: 'confirm-purchase-dialog',
  styleUrls: ['confirm_purchase_dialog.css'],
  templateUrl: 'confirm_purchase_dialog.html',
  directives: const [
    MaterialDialogComponent,
    ModalComponent,
  ],
  providers: const [overlayBindings]
)
class ConfirmPurchaseDialogComponent {

  void onKeyUp(KeyboardEvent e) {
    print("KEYUP");
  }
}

注意：这只会在焦点位于对话框本身时捕获键盘事件。您可能想在主体上添加一个事件，而不是捕获所有 keyup 实例。这你只需要用一般的 'dart:html'

AngularDart 检测组件内的 Keyup 事件

AngularDart Detect Keyup Event within Component

modal-dialog

angular-material

angular-dart

keyup