祖父正在处理发出的自定义事件，而不是 Angular 17 中的父级

Question

我有一个名为 ImageUpload 的组件，它处理图片上传，然后发出值。 我在一个名为 IngredientForm 的组件中使用该组件，它可以工作，问题出在 IngredientForm 内部，还有另一个名为 ModifyIngredientModal 的组件，我再次使用 ImageUpload ，当从那里发出事件时，它会使用该方法进行处理我是在 IngredientForm 里面写的，而不是在 ModifyIngredientModal 中写的。

基本上，祖父母正在处理子事件而不是父母。

这是ModifyIngredientModal

的代码

  <app-image-upload
    [label]="'recipes.editor.ingredients.picture' | transloco"
    [inputName]="'ingredientPicture'"
    (photoUploaded)="uploadNewPicture($event)">
  </app-image-upload>

  uploadNewPicture(uploadedPictures: customFile[]) {
    console.log("MODIFY")
    if (uploadedPictures[0]) {
      this.ingredientPicture = uploadedPictures[0];
      this.ingredientForm.controls.ingredientPicture.setValue(true)
    } else {
      this.ingredientForm.controls.ingredientPicture.setValue(false)
    }
  }

这是来自IngredientForm

的

 <app-image-upload
   #ingredientPictureUpload
   [label]="'recipes.editor.ingredients.picture' | transloco"
   [inputName]="'ingredientPicture'"
   (photoUploaded)="getIngredientUploadedPhoto($event)">
 </app-image-upload>

  getIngredientUploadedPhoto(uploadedPictures: customFile[]) {
    console.log("FORM")
    if (uploadedPictures[0]) {
      this.ingredientPicture = uploadedPictures[0];
      this.ingredientForm.controls.ingredientPicture.setValue(true)
    } else {
      this.ingredientPicture = null;
      this.ingredientForm.controls.ingredientPicture.setValue(false)
    }
  }

在控制台中我只能看到打印的表格，我期望父母会处理该事件并且它停在那里，我可以理解他们两个正在处理的事件，但肯定不是只有祖父母处理它

Answer 1

好吧，我发现了问题，基本上我的组件将文件的输入包装在标签中，并使用标签的属性 for 来引用输入。 我的两个组件具有相同的 id，所以当我单击第二个组件时，它可能会从上到下读取 html 并激活第一个组件的事件...堆栈闪电战起作用了，因为我在那里没有任何 css，所以我单击了正常输入