两个组件触发同一事件

Question

我有一个带有单选按钮的简单组件：

HTML：

version: "3"
services:
  mail:
    image: robertstauch/mailhog:v1.0.0-dockerized-v0.6.1
    build: .
    ports:
      - "8025:8025"
      - "1025:1025"
    deploy:
      restart_policy:
        condition: on-failure
        delay: 10s
        max_attempts: 3
        window: 60s

  mail-db:
    image: mongo:4.2.6
    environment:
      MONGO_INITDB_DATABASE: mailhog
      MONGO_INITDB_ROOT_USERNAME: root
      MONGO_INITDB_ROOT_PASSWORD: root
    deploy:
      restart_policy:
        condition: on-failure
      resources:
        limits:
          cpus: "0.5"
          memory: 500M

Ts：

<div class="rate">
  <input type="radio" id="star5" name="rate" value="5" (change)="onRateChange($event.target.value)"/>
  <label for="star5" title="text">5 stars</label>
...
</div>

当我像这样使用它时：

HTML：

@Output() rateSelected = new EventEmitter<number>();

public onRateChange(value: number) {
    this.rateSelected.emit(value);
  }

Ts：

<form>
  <h1>Rate one:</h1>
  <app-stars (rateSelected)="onRateOneSelected($event)"></app-stars>

  <h1>Rate two:</h1>
  <app-stars (rateSelected)="onRateTwoSelected($event)"></app-stars>
</form>

无论我始终使用第一等级还是第二等级，都会触发 onRateOneSelected(rate: number) { alert('app ' + rate); // this one is always triggered } onRateTwoSelected(rate: number) { alert('comfort ' + rate); } 事件。怎么了？我该如何解决？