L'émetteur d'événements Angular d'un composant est confondu avec un autre composant

Question

CONTEXTE

J'ai deux composants : image-input-single et un conteneur de test. image-input-single est un composant " muet " qui simplifie le processus de sélection d'une image, de récupération du fichier compressé et de son url.

Le fichier Typescript et le fichier HTML sont présentés ci-dessous.

@Component({
  selector: "app-image-input-single",
  templateUrl: "./image-input-single.component.html",
  styleUrls: ["./image-input-single.component.scss"]
})
export class ImageInputSingleComponent implements OnInit {
  @Input()
  image ? : string;

  @Input()
  circular!: boolean;

  @Output()
  imageAdded = new EventEmitter < Image > ();

  @Output()
  imageRemoved = new EventEmitter < Image > ();

  onImageClear = () => {
    console.log("Image clear");
    if (this.image) {
      this.imageRemoved.emit({
        image: this.image
      });
    }
  };

  constructor(
    private ng2ImgMax: Ng2ImgMaxService,
    public sanatizer: DomSanitizer
  ) {}

  ngOnInit() {
    console.log(this.image);
  }
  onFileChanged(event: any) {
    if (event.target.files && event.target.files[0]) {
      const rawImage = event.target.files[0];
      this.ng2ImgMax.compressImage(rawImage, 0.2).subscribe(
        result => {
          const file = new File([result], result.name);
          const reader = new FileReader();
          // @ts-ignore
          reader.onload = (pe: ProgressEvent) => {
            this.imageAdded.emit({
              // @ts-ignore
              image: pe.target.result,
              imageFile: file
            });
          };

          reader.readAsDataURL(file);
        },
        error => {
          console.log(error);
        }
      );
    }
  }
}

<input type="file" (change)="onFileChanged($event)" accept="image/*" multiple id="imageInput">
<div [ngClass]="{'boxCircular': circular,
'box': true}">
  <label for="imageInput">

    <mat-icon *ngIf="!image; else imageTemp" class="camIcon">camera_alt</mat-icon>

    <ng-template #imageTemp>
      <button mat-icon-button class="cancelButton" (click)="onImageClear()" type="button">
        <mat-icon class="cancelIcon">cancel</mat-icon>
      </button>
      <img [src]="sanatizer.bypassSecurityTrustUrl(image)" [ngClass]="{'profilePic': circular, 'book': !circular}">
    </ng-template>
  </label>
</div>

J'ai ensuite un composant simple qui contient deux instances de image-input-single

import { Component, OnInit } from "@angular/core";
import { Image } from "src/app/models/Image";

@Component({
  selector: "app-test",
  templateUrl: "./test.component.html",
  styleUrls: ["./test.component.scss"]
})
export class TestComponent implements OnInit {
  constructor() {}

  image1?: Image;
  image2?: Image;

  imageAdd1 = (image: Image) => {
    console.log("1");
    this.image1 = image;
  };

  imageAdd2 = (image: Image) => {
    console.log("2");
    this.image2 = image;
  };

  imageRemove1 = (image: Image) => {
    this.image1 = image;
  };

  imageRemove2 = (image: Image) => {
    this.image2 = image;
  };

  ngOnInit() {
    this.image2 = {
      image: "https://i.stack.imgur.com/zwwhZ.png"
    };
  }
}

<app-image-input-single (imageAdded)="imageAdd1($event)" (imageRemoved)="imageRemove1($event)" [image]="image1?.image">

</app-image-input-single>
<app-image-input-single (imageAdded)="imageAdd2($event)" (imageRemoved)="imageRemove2($event)" [image]="image2?.image">

</app-image-input-single>

PROBLÈME

imageAdd2 ou imageRemove2 n'est jamais déclenché, même lors de l'interaction avec le deuxième composant de sélection d'entrée d'image. imageAdd1 et imageRemove1 est toujours déclenché lors de l'ajout ou du retrait d'une image de 1 ou 2.

Je suis confronté à ce problème depuis plusieurs jours et rien n'a fonctionné. J'apprécierais grandement toute aide.