Angular复用组件valueChange仅触发首个订阅者问题求助

问题根源 #

你的jam-toggle组件模板中，input的id被硬编码为customSwitch1，对应的label的for属性也绑定了这个固定值。当页面中渲染多个该组件时，所有组件的label都会指向第一个拥有customSwitch1 id的input元素——点击第二个组件的label，实际触发的是第一个input的change事件，因此只有第一个组件的valueChange回调会被执行。

修复步骤 #

1. 为每个组件实例生成唯一ID
   在组件类中添加一个私有属性，用于存储当前实例的唯一标识，可通过时间戳+随机字符串生成：

export class ToggleComponent extends BaseDetachedComponent implements OnInit {
    // 新增：生成唯一ID
    private uniqueId: string = `custom-toggle-${Date.now()}-${Math.random().toString(36).slice(2, 10)}`;
    // ... 其他原有代码
}

2. 修改模板绑定唯一ID
   将input的id和label的for属性绑定到这个唯一ID，替换原来的硬编码值：

<div [ngClass]="sizeClass" class="custom-control custom-switch">
  <input
    (change)="changeValue($event)"
    [checked]="checked"
    type="checkbox"
    class="custom-control-input"
    [id]="uniqueId"
  >
  <label class="custom-control-label" [for]="uniqueId"></label>
</div>

3. 额外优化（针对radio类型）
   如果后续会使用ESwitchType.radio类型，还需要给radio的name属性也绑定唯一值，避免同页面的多个radio组件互相干扰：

<input
  <!-- 其他属性 -->
  [name]="uniqueId"
>

补充优化：动态绑定input类型 #

原来的模板中input的type固定为checkbox，可以改为根据组件的type输入动态切换，让组件真正支持三种类型：

<input
  (change)="changeValue($event)"
  [checked]="checked"
  [type]="type === ESwitchType.radio ? 'radio' : 'checkbox'"
  class="custom-control-input"
  [id]="uniqueId"
  [name]="uniqueId"
  [disabled]="isDisabled"
>

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