关注按钮 p-toast primeng modal答案

【问题标题】：Getting focus on buttons p-toast primeng modal关注按钮 p-toast primeng modal
【发布时间】：2019-12-17 13:34:41
【问题描述】：

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

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

<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

【问题讨论】：

在这里查看这个演示 ???? stackblitz.com/edit/angular-deffocus????
您好，dirtyw0lf 如果我的回答解决了您的问题，请考虑接受它。这向更广泛的社区表明您已经找到了解决方案，并为回答者和您自己带来了一些声誉。没有义务这样做。 ??????

标签： angular modal-dialog primeng

【解决方案1】：

angular 指令在这里完美工作，简而言之，只需获取元素的引用（el）（确认按钮）并在 angular 生命周期挂钩 ngAfterViewInit 时运行焦点方法。

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() { ... }

当组件的视图和子视图/指令所在的视图已初始化时，在 ngAfterContentInit 之后调用。

stackblitz demo ??

【讨论】：