如何为所有PrimeNG p-inputNumber组件全局设置默认useGrouping="false"？

PrimeNG 20的官方文档确实未提供针对p-inputNumber组件useGrouping属性的全局配置项，不过可以通过以下两种变通方法实现需求：

方案一：自定义封装组件 #

创建一个继承自PrimeNG InputNumber的自定义组件，默认将useGrouping设为false，后续项目中统一使用该自定义组件：

import { Component, Input } from '@angular/core';
import { InputNumber } from 'primeng/inputnumber';

@Component({
  selector: 'app-input-number',
  template: '<p-inputNumber [useGrouping]="useGrouping" [value]="value" [disabled]="disabled" [min]="min" [max]="max"></p-inputNumber>',
  standalone: true,
  imports: [InputNumber]
})
export class AppInputNumberComponent extends InputNumber {
  // 默认关闭分组，允许手动传入true开启
  @Input() override useGrouping = false;
}

使用时用<app-input-number>替代原生<p-input-number>，如需个别开启分组，直接传递useGrouping="true"即可。

方案二：全局属性指令（推荐） #

创建Angular属性指令，自动为所有p-inputNumber设置默认的useGrouping=false，且不会覆盖手动指定的属性值：

import { Directive, OnInit } from '@angular/core';
import { InputNumber } from 'primeng/inputnumber';

@Directive({
  selector: 'p-inputNumber',
  standalone: true
})
export class InputNumberDefaultDirective implements OnInit {
  constructor(private inputNumberComp: InputNumber) {}

  ngOnInit(): void {
    // 仅当未手动设置useGrouping时，覆盖为false
    if (this.inputNumberComp.useGrouping === undefined) {
      this.inputNumberComp.useGrouping = false;
    }
  }
}

将该指令导入到根模块或全局共享的standalone组件中，所有p-inputNumber会自动应用默认配置，无需修改原有模板代码；若某组件需要开启分组，直接添加useGrouping="true"即可覆盖默认值。

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