Javascript 一个组件的角度事件发射器与另一个组件混淆 背景

我有两个组件图像输入单和一个测试容器。image input single是一个“哑”组件，它简化了选择图像、获取压缩文件及其url的过程

它的类型脚本文件和HTML文件如下所示

@组件({
选择器：“应用程序图像输入单”，
templateUrl:“./image input single.component.html”，
样式URL:[“/image-input-single.component.scss”]
})
导出类ImageInputSingleComponent实现OnInit{
@输入（）
图像？：字符串；
@输入（）
循环！：布尔；
@输出（）
imageAdded=neweventemitter（）；
@输出（）
imageRemoved=neweventemitter（）；
onImageClear=（）=>{
控制台日志（“图像清除”）；
如果（此图像）{
此.imageRemoved.emit({
图片：这个
});
}
};
建造师(
专用ng2ImgMax:ng2ImgMax服务，
公共卫生设备：消毒设备
) {}
恩戈尼尼特（）{
console.log（this.image）；
}
onFileChanged（事件：任意）{
if（event.target.files&&event.target.files[0]）{
const rawImage=event.target.files[0]；
此.ng2ImgMax.compressImage（rawImage，0.2）.subscribe(
结果=>{
const file=新文件（[result]，result.name）；
const reader=new FileReader（）；
//@ts忽略
reader.onload=（pe:ProgressEvent）=>{
this.imageAdded.emit({
//@ts忽略
图片：pe.target.result，
图像文件：文件
});
};
reader.readAsDataURL（文件）；
},
错误=>{
console.log（错误）；
}
);
}
}
}

摄像机高度
取消

原因

• ImageInputSingleComponent

  可能共享导致此问题的

  Ng2ImgMaxService

  的同一实例
• 第二个问题是

  id

  =

  imageInput

  。这是用html硬编码的，但是对于每个组件实例，它必须是唯一的

修理 只需将

Ng2ImgMaxService

提供给

ImageInputSingleComponent

级别，以确保每个组件都有自己的副本

@Component({
  selector: "app-image-input-single",
  templateUrl: "./image-input-single.component.html",
  styleUrls: ["./image-input-single.component.scss"],
  providers : [Ng2ImgMaxService] //<-- Ng2ImgMaxService is added in provider list
})
export class ImageInputSingleComponent implements OnInit {

}

@组件({
选择器：“应用程序图像输入单”，
templateUrl:“./image input single.component.html”，
样式URL:[“/image input single.component.scss”]，
提供者：[Ng2ImgMaxService]//问题可能出在`this.ng2ImgMax.compressImage`。我敢打赌，它发出的可观察内容在调用之间会被重用，这会导致在编辑第二个映像时触发第一个组件。是否仍会触发相同的问题，只有imageAdd1和imageRemove1。您的id
id='imageInput“
必须是唯一的。到目前为止，它的硬编码和组件的所有实例都将具有相同的is，这是第二个问题。对不起，您所说的id是什么意思？我没有任何组件的id输入道具。
id
和
用于html中的
。
非常感谢您，这个bug害了我。