Angular 18中使用number类型输入框消除Chrome控制台违规问题

方案1：升级Angular Material到最新补丁版本 #

这个违规提示是Angular Material 18早期版本的常见问题，官方后续补丁已经修复了wheel事件监听器未标记为passive的疏漏。直接执行命令升级到最新稳定版：

npm install @angular/material@latest @angular/cdk@latest

升级完成后重启项目，控制台的违规提示应该会消失。

方案2：自定义指令强制设置passive监听器 #

要是升级后问题还在，就自己写个指令来修正事件监听逻辑：

1. 新建passive-wheel.directive.ts文件：

import { Directive, HostListener, ElementRef } from '@angular/core';

@Directive({
  selector: 'input[matInput][type="number"]'
})
export class PassiveWheelDirective {
  constructor(private el: ElementRef<HTMLInputElement>) {}

  @HostListener('wheel', ['$event'], { passive: true })
  onWheel(event: WheelEvent): void {
    // 留空即可，仅用于标记监听器为passive
  }
}

2. 在你的共享模块（或使用该输入框的模块）中声明并导出这个指令：

import { NgModule } from '@angular/core';
import { PassiveWheelDirective } from './passive-wheel.directive';

@NgModule({
  declarations: [PassiveWheelDirective],
  exports: [PassiveWheelDirective]
})
export class SharedModule {}

3. 模板里正常用数字输入框就行，指令会自动生效：

<input matInput type="number" [(ngModel)]="yourNumber">

这个指令会给所有带matInput和type="number"的输入框加上passive的wheel监听器，覆盖Material内部的非被动监听器，既能消除违规提示，输入框也依然保持数字类型，返回值不会变成字符串。

方案3：禁用滚轮调整数字（可选） #

如果不需要滚轮调整输入框数值，还可以在指令里阻止滚轮的默认行为，一举两得：
修改指令中的onWheel方法：

@HostListener('wheel', ['$event'], { passive: false })
onWheel(event: WheelEvent): void {
  event.preventDefault();
}

注意这里要把passive设为false，因为要调用preventDefault()。

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