Два одинаковых компонента в одном родительском элементе, первый перекрывает второй

Question

У меня есть компонент, который содержит два подкомпонента, подкомпонент идентичен:

<!-- Some code ... -->

<app-upload-button
  #idBook
  [accept]="'image/*'"
  (loadend)="onImageLoaded('#this-idbook-preview')"
>
</app-upload-button>

<!-- Some code ... -->

<app-upload-button
  #userIdBook
  [accept]="'image/*'"
  (loadend)="onImageLoaded('#this-user-idbook-preview')"
>
</app-upload-button>

<!-- Some code ... -->

Как мы видим, два элемента имеют разные ссылки #idBook и #userIdBook, а также строку, переданную вфункции onImageLoaded отличаются '#this-idbook-preview' и '#this-user-idbook-preview'.

Моя проблема в том, что независимо от того, взаимодействую ли я с #idBook или #userIdBook, кажется, что #idBook всегда заменяет другойэлемент.Когда я проверяю строку в onImageLoaded, я всегда получаю '#this-idbook-preview', даже если я нажму на второй элемент.Кроме того, изменяются только переменные первого элемента, второй всегда неизменен.

В чем здесь проблема?И как это исправить?

Редактировать: UploadButtonКомпонентный код

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-upload-button',
  templateUrl: './upload-button.component.html',
  styleUrls: ['./upload-button.component.css']
})
export class UploadButtonComponent implements OnInit {
  @Input() accept: string;
  @Output() loadend: EventEmitter<void>;

  file: File;
  fileData: string;

  constructor() {
    this.loadend = new EventEmitter();
  }

  ngOnInit() {
    if (this.accept === undefined) {
      this.accept = '*';
    }
  }

  readFile(): void {
    const reader = new FileReader();

    reader.onloadend = (event: any) => {
      this.fileData = event.target.result;
      this.loadend.emit();
    };

    reader.readAsDataURL(this.file);
  }

  onChange(event: any): void {
    this.file = event.target.files[0];
    this.readFile();
  }
}

Редактировать 2: Мини-проект

Я создал мини-проект, чтобы показать проблему, ссылка здесьhttps://drive.google.com/open?id=1yafbuiKYUQ-POeNAXHu0ATyo8l84ydCE

Answer 1

С Angular вы должны быть осторожны с нативными правилами HTML.Одним из них является то, что вы не должны иметь несколько элементов с одинаковым идентификатором.Здесь вы используете постоянный идентификатор внутри вашего компонента, поэтому, когда вы используете этот идентификатор, все они будут запускать первый компонент (который содержит первый элемент страницы с этим идентификатором).
Таким образом, у вас есть 2 решения.

1. Компонент, вызывающий кнопку загрузки, дает ему уникальный идентификатор.Это может быть опасно, если вы забудете, что каждый идентификатор должен быть уникальным.
2. Сделайте что-нибудь, чтобы один и тот же идентификатор никогда не использовался дважды, используя счетчик

Вы можете сделать этотаким образом:

// component
export class UploadButtonComponent implements OnInit {
  static nextIdNumber: number = 0; // will increment for each generated component
  public myId: string; // generated unique HTML id
  // ...

  constructor() {
    // ...
    this.myId = `this-files-${++UploadButtonComponent.nextIdNumber}`;
  }
  // ...
}

<!--HTML-->
<label
  [for]="myId"
  class="btn btn-primary"
>
  Upload
</label>

<input (change)="onChange($event)" [id]="myId" type="file" accept="{{ accept }}" capture>