Angular 4：使用ViewChild设置按钮焦点失效问题咨询

嘿，我来帮你捋一捋这个问题～首先明确说：完全不需要用Pipe来处理焦点设置的问题，你的思路是对的，但大概率是代码里的一些细节没处理到位，导致焦点没生效。

先看你目前的代码，我整理了几个可能的问题点和对应的修复方案：

1. ViewChild的配置遗漏（Angular 8+版本） #

从Angular 8开始，@ViewChild装饰器必须指定static选项，用来控制元素的查询时机：

• 如果你的按钮是页面初始渲染就存在的（没有被*ngIf这类条件指令包裹），设置static: true，确保在ngAfterViewInit之前就能拿到元素引用；
• 如果按钮是动态渲染的（比如依赖某个条件变量显示），就用static: false。

修正后的代码示例：

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

@Component({
  template: `<button #btn_focus>点击我</button>`
})
export class YourComponent implements AfterViewInit {
  // 初始就存在的元素用static: true
  @ViewChild('btn_focus', { static: true }) firstNameElement: ElementRef<HTMLButtonElement>;

  ngAfterViewInit() {
    this.firstNameElement.nativeElement.focus();
  }
}

2. 按钮是否是动态渲染的？ #

如果你的按钮是在*ngIf、*ngFor或者其他条件渲染逻辑里面，那在ngAfterViewInit执行的时候，元素可能还没被创建出来，这时候调用focus自然不会生效。

这种情况下，你需要等元素渲染完成后再调用焦点方法，比如：

• 监听控制元素显示的变量变化，在变化后触发焦点；
• 配合ChangeDetectorRef手动触发变化检测，确保元素渲染完成。

举个实际例子：

import { Component, ViewChild, ElementRef, ChangeDetectorRef } from '@angular/core';

@Component({
  template: `<button #btn_focus *ngIf="showButton">动态按钮</button>`
})
export class YourComponent {
  showButton = false;
  @ViewChild('btn_focus', { static: false }) firstNameElement: ElementRef<HTMLButtonElement>;

  constructor(private cdRef: ChangeDetectorRef) {}

  ngOnInit() {
    // 模拟异步加载后显示按钮
    setTimeout(() => {
      this.showButton = true;
      // 手动触发变化检测，让Angular渲染按钮
      this.cdRef.detectChanges();
      // 现在可以安全设置焦点了
      this.firstNameElement.nativeElement.focus();
    }, 1000);
  }
}

3. 加上空值检查避免报错 #

为了避免因为元素不存在导致的报错，建议加上可选链操作符做空值检查：

ngAfterViewInit() {
  this.firstNameElement?.nativeElement?.focus();
}

总的来说，你的核心思路是正确的，不用借助Pipe，检查上面这几个点应该就能解决焦点不生效的问题啦～

内容的提问来源于stack exchange，提问作者Gelso77