如何在Ng Zorro抽屉组件中禁用自动聚焦功能

这里有几个比临时隐藏输入框更优雅的解决方案：

方案一：抽屉打开后手动移除首个输入框焦点 #

利用抽屉的nzAfterOpen事件，在抽屉完全打开后找到第一个输入框并取消焦点，逻辑简单直接：

模板代码：

<nz-drawer (nzAfterOpen)="handleDrawerOpen()">
  <nz-drawer-content>
    <input nz-input placeholder="第一个输入框" />
    <!-- 其他抽屉内容 -->
  </nz-drawer-content>
</nz-drawer>

组件类代码：

handleDrawerOpen(): void {
  // 精准定位抽屉内的第一个输入框
  const firstInput = document.querySelector('.ant-drawer-content input') as HTMLInputElement;
  if (firstInput) {
    firstInput.blur();
  }
}

方案二：用不可见的空元素作为初始聚焦目标 #

相比你用隐藏输入框的方案，用div元素更轻量，不会引入输入框相关的冗余逻辑（比如表单校验、提交值）：

模板代码：

<nz-drawer>
  <nz-drawer-content>
    <!-- 放在抽屉内容最顶部，作为初始聚焦容器 -->
    <div tabindex="-1" style="position: absolute; opacity: 0; width: 0; height: 0; overflow: hidden;"></div>
    <input nz-input placeholder="第一个输入框" />
    <!-- 其他抽屉内容 -->
  </nz-drawer-content>
</nz-drawer>

tabindex="-1" 表示该元素可以被程序聚焦，但不会被Tab键选中，完美替代隐藏输入框的作用。

方案三：监听焦点事件阻止默认聚焦行为 #

如果需要更精细的控制，可以通过Angular的Renderer2监听抽屉内的焦点事件，阻止第一个输入框的默认聚焦：

组件类代码：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnDestroy {
  @ViewChild('drawerContent') drawerContent!: ElementRef;
  private focusListener?: () => void;

  constructor(private renderer: Renderer2) {}

  ngAfterViewInit(): void {
    // 监听抽屉内容内的所有focus事件
    this.focusListener = this.renderer.listen(this.drawerContent.nativeElement, 'focus', (event) => {
      const target = event.target as HTMLElement;
      const firstInput = this.drawerContent.nativeElement.querySelector('input');
      // 仅阻止第一个输入框的初始聚焦
      if (target === firstInput) {
        event.preventDefault();
        target.blur();
      }
    });
  }

  ngOnDestroy(): void {
    this.focusListener?.();
  }
}

模板代码：

<nz-drawer>
  <nz-drawer-content #drawerContent>
    <input nz-input placeholder="第一个输入框" />
    <!-- 其他抽屉内容 -->
  </nz-drawer-content>
</nz-drawer>

推荐优先使用方案二，代码改动最小且无冗余逻辑；如果需要动态控制聚焦行为，方案一或三更合适。

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