关注按钮 p-toast primeng modal

Question

这是当用户选择要删除的内容时显示的模式。

如何将焦点设置在按钮上而不是停留在模态下面的底层内容上？

<p-toast position="center" key="modal" (onClose)="onDeleteReject()" [modal]="true" [baseZIndex]="5000">
  <ng-template let-message pTemplate="message">
    <div style="text-align: center">
      <i class="pi pi-exclamation-triangle" style="font-size: 3em"></i>
      <h3>{{message.summary}}</h3>
      <p>{{message.detail}}</p>
    </div>
    <div class="ui-g ui-fluid" focus="true">
      <div class="ui-g-6">
        <button type="text" pButton (click)="onDeleteConfirm()" label="Oui" class="ui-button-success"></button>
      </div>
      <div class="ui-g-6">
        <button type="text" pButton (click)="onDeleteReject()" label="Non" class="ui-button-secondary"></button>
      </div>
    </div>
  </ng-template>
</p-toast>

使用自动对焦似乎有效，但仅在第一次加载模态时有效。

<button type="button" pButton (click)="onDeleteConfirm()" label="Oui" 
         class="ui-button-success" autofocus>
</button>

https://www.primefaces.org/primeng/#/toast

Answer 1

angular 指令在这里完美地工作，简而言之，只需在 angular 生命周期钩子 [=12] 时获取元素（确认按钮）和运行焦点方法的引用（el） =].

def-focus.directive

import { Directive , AfterViewInit ,ElementRef } from '@angular/core';

@Directive({
  selector: '[defFocus]'
})
export class DefFocusDirective implements AfterViewInit {

  constructor(private el: ElementRef) { }

  ngAfterViewInit(){
    console.log('rendered ');
    console.log(this.el.nativeElement.focus())
  }

}

模板

<div class="ui-g-6">
   <button type="button" pButton (click)="onConfirm()" 
           label="Yes" class="ui-button-success" defFocus >
   </button>
 </div>

ngAfterViewInit() { ... }

Called after ngAfterContentInit when the component's views and child views / the view that a directive is in has been initialized.

stackblitz demo

关注按钮 p-toast primeng modal

Getting focus on buttons p-toast primeng modal

modal-dialog

primeng

angular