Angular重复组件实例中如何为AutoNumeric设置唯一选择器？

你遇到的核心问题是用了全局固定的类选择器，导致多个组件实例的AutoNumeric会选中所有匹配的元素。其实完全不用依赖唯一类名，Angular的组件视图引用就能完美解决这个问题，推荐两种方案：

方案一：使用@ViewChild直接获取组件内的Input（最推荐） #

这种方法完全避开了选择器的问题，直接操作当前组件实例内的DOM元素，最符合Angular的组件化设计：

import { Component, ViewChild, AfterViewInit, OnDestroy, ElementRef } from '@angular/core';
import { FieldType } from '@ngx-formly/material';
import AutoNumeric from 'AutoNumeric';

@Component({
  selector: 'app-form-currency-type',
  template: `
    <div>
      <!-- 添加模板引用变量 #currencyInput -->
      <input #currencyInput matInput [formControl]="formControl" [formlyAttributes]="field" autocomplete="false" type="text" />
    </div>
  `,
})
export class CurrencyTypeComponent extends FieldType implements AfterViewInit, OnDestroy {
  // 用@ViewChild获取当前组件内的input元素
  @ViewChild('currencyInput', { static: false }) currencyInput!: ElementRef<HTMLInputElement>;
  private autoNumericInstance?: AutoNumeric;

  // 改用ngAfterViewInit，确保DOM元素已经渲染完成
  ngAfterViewInit() {
    this.autoNumericInstance = new AutoNumeric(this.currencyInput.nativeElement, {
      allowDecimalPadding: false,
      caretPositionOnFocus: "start",
      currencySymbol: "£",
      decimalPlaces: 0
    });
  }

  // 记得在组件销毁时清理AutoNumeric实例，避免内存泄漏
  ngOnDestroy() {
    this.autoNumericInstance?.destroy();
  }
}

为什么这个方案好用？ #

• 每个组件实例的@ViewChild只会捕获自己模板里的#currencyInput元素，完全不会和其他实例冲突
• 不需要维护任何唯一标识，代码更简洁
• 直接操作DOM元素引用，比使用选择器性能更好

方案二：生成唯一类名（备选） #

如果你确实需要用类选择器的方式，可以在组件内生成一个唯一的类名，绑定到模板上：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { FieldType } from '@ngx-formly/material';
import AutoNumeric from 'AutoNumeric';

@Component({
  selector: 'app-form-currency-type',
  template: `
    <!-- 绑定动态生成的唯一类名 -->
    <div [class]="uniqueClass">
      <input matInput [formControl]="formControl" [formlyAttributes]="field" autocomplete="false" type="text" />
    </div>
  `,
})
export class CurrencyTypeComponent extends FieldType implements OnInit, OnDestroy {
  uniqueClass = `cssClass-${Math.random().toString(36).slice(2, 10)}`;
  private autoNumericInstance?: AutoNumeric;

  ngOnInit() {
    // 使用当前组件的唯一类名作为选择器
    this.autoNumericInstance = new AutoNumeric(`.${this.uniqueClass} > input`, {
      allowDecimalPadding: false,
      caretPositionOnFocus: "start",
      currencySymbol: "£",
      decimalPlaces: 0
    });
  }

  ngOnDestroy() {
    this.autoNumericInstance?.destroy();
  }
}

注意事项 #

• 这里用Math.random()生成唯一标识，也可以用Angular的服务生成更稳定的递增ID
• 同样要记得在组件销毁时销毁AutoNumeric实例，防止内存泄漏

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