通过 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 包含按钮元素，您可以将焦点设置在它上面.有关演示，请参阅此 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屋！