通过ngIf出现后，对元素进行聚焦 [英] Focus an element after it appears via ngIf

问题描述

我有一个按钮，单击后将其替换为输入字段和确认按钮，然后在输入完成后将其再次替换为原始按钮.发生这种情况时，我希望它在原始按钮出现后将其焦点对准(某些用户要求更好地支持选项卡导航)，但是我似乎无法始终如一地做到这一点.我能做的最好的事情是:

I have a button that, when clicked, is replaced with an input field and a confirmation button, then when input is finished it's replaced with the original button again. When that happens, I want it to focus the original button after it appears (some users have requested better support for tab-navigation), but I can't seem to get it to do that consistently. The best I've been able to do is this:

// component.html
<button #durationButton *ngIf="!enteringDuration" (click)="enterDuration()">Enter Duration</button>
<ng-container *ngIf="enteringDuration">
    <input type="number" [(ngModel)]="duration" (keyup.enter)="setDuration()">
    <button (click)="setDuration()">&#10003;</button>
</ng-container>

// component.ts
@ViewChild("durationButton") durationButton: ElementRef
duration: number
enteringDuration = false
shouldFocusDurationButton = false

ngAfterContentChecked () {
    if (this.shouldFocusDurationButton && this.durationButton) {
        this.shouldFocusDurationButton = false
        this.durationButton.nativeElement.focus()
    }
}

enterDuration () {
    this.enteringDuration = true
}
setDuration () {
    this.enteringDuration = false
    this.shouldFocusDurationButton = true
}

如果单击或按下确认按钮上的Enter键，焦点将在显示后立即移至原始按钮，但是如果我在输入字段中按Enter键，则该按钮出现，但由于某种原因，直到我单击按钮移动鼠标.如何使两者立即生效?

If I click or press enter on the confirmation button, focus moves to the original button as soon as it appears, but if I press enter in the input field the button appears but for some reason it doesn't gain focus until I move the mouse. How do I make it work immediately for both?

推荐答案

在将按钮添加到视图中或从视图中删除按钮时，可以使用ViewChildren和QueryList.changes事件得到通知.如果QueryList包含button元素，则可以对其设置焦点.有关演示，请参见 此stackblitz .建议:您可能想做些类似的事情，以便在输入字段可见时将焦点设置在输入字段上.

You can use ViewChildren and the QueryList.changes event to be notified when the button is added to or removed from the view. If the QueryList contains the button element, you can set the focus on it. See this stackblitz for a demo. Suggestion: you may want to do something similar to set the focus on the input field when it becomes visible.

import { Component, ViewChildren, ElementRef, AfterViewInit, QueryList } from '@angular/core';
...

export class AppComponent implements AfterViewInit {

  @ViewChildren("durationButton") durationButton: QueryList<ElementRef>;

  enteringDuration = false

  ngAfterViewInit() {
    this.setFocus(); // If the button is already present...
    this.durationButton.changes.subscribe(() => {
      this.setFocus();
    });
  }

  setFocus() {
    if (this.durationButton.length > 0) {
      this.durationButton.first.nativeElement.focus();
    }
  }

  enterDuration() {
    this.enteringDuration = true
  }

  setDuration() {
    this.enteringDuration = false
  }
}

这篇关于通过ngIf出现后，对元素进行聚焦的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！