@ViewChild берет HTMLElement из другого компонента

Question

У меня есть этот компонент представления

add-publication.ts

- это в основном пустой класс

add-publication.html

<div class="file-upload" fxLayout="row">
  <div class="file-upload__portrait">
    <app-take-photo></app-take-photo>
  </div>
  <div class="file-upload__gallery" fxLayout="column">
    <app-take-photo></app-take-photo>
    <app-take-photo></app-take-photo>
    <app-take-photo></app-take-photo>
    <app-take-photo></app-take-photo>
  </div>
</div>

И этот компонент

take-photo.ts

export class TakePhotoComponent implements OnInit {
  @ViewChild('img', { read: ElementRef })
  img: ElementRef<HTMLImageElement>;

  constructor(private service: TakePhotoService) {}

  ngOnInit(): void {}

  async onChange(files: FileList) {
    try {
      const result = await this.service.compressAndRemoveExifFromPhoto(files && files[0]);
      this.img.nativeElement.src = result;
    } catch (e) {
      console.error(e);
    }
  }
}

<img #img class="upload__preview" alt="Upload your photo">

<input id="upload" class="upload__input" type="file" accept="image/*" capture="environment"
  (change)="onChange($event.target.files)">
<label class="upload__action" for="upload">
  &nbsp;
</label>

Проблема в этом компоненте. Когда я нажимаю, например, на третий компонент изнутри .file-upload__gallery, тогда this.img всегда является первым (я имею в виду тот, который находится внутри .file-upload__portrait). Я не знаю почему.

Я ожидал получить <img> изнутри выбранного компонента, а не от другого.

Это потому, что каждый <img> имеет #img как идентификатор

Answer 1

Итак, я выясняю проблему.

Каждый компонент имеет один input id="upload" и label for="upload". Всякий раз, когда я нажимаю label, он всегда указывает на первый input, потому что они не являются уникальными

. В моем случае удаление label решает проблему.

Я обнаружил похожую проблему и здесь