Question

我正在尝试在材料对话框模式中检测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-indexing问题。因此，您将不会从主机中的对话框获取事件。相反，您可以直接将事件直接添加到物料对话框中：

模板：

<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事件

1 个答案: