javascript - Angular 2+ 中的 JS 仅影响一个组件，而不是影响每个组件

Question

我有一个 Angular 2+ 应用程序，可以选择图像并查看它在预览中的外观。问题是我在父 HTML 中有 3 个组件，它们可以执行相同的工作并包含相同的 JS 脚本仅影响第一个组件。代码如下。 Here is Gif which presents how it works

父 HTML:

<div class="form-inline">
                <app-advert-photo-element id="first" [photoNumber]="1"></app-advert-photo-element>
                <app-advert-photo-element id="second" [photoNumber]="2"></app-advert-photo-element>
                <app-advert-photo-element id="third" [photoNumber]="3"></app-advert-photo-element>
</div>

应用程序广告照片元素 HTML:

<div class="polaroid">
  <label for="photo" class="cursor-pointer">
    <img [src]="url" class="img-fluid" alt="">
  </label>
  <div class="img-title-bot">
    Nr {{photoNumber}}.
  </div>
  <input type="file" id="photo" (change)="onSelectFile($event)">
</div>

应用程序广告照片元素.ts:

export class AdvertPhotoElementComponent implements OnInit {

  @Input()
  protected photoNumber;

  protected url = '';

  constructor() {
  }

  ngOnInit() {
  }

  onSelectFile(event: any) {
    if (event.target.files && event.target.files[0]) {
      const reader = new FileReader();

      reader.onload = (onLoadEvent: any) => {
        this.url = onLoadEvent.target.result;
      };

      reader.readAsDataURL(event.target.files[0]);
    }
  }
}

请帮助我。我找不到解决方案...转载:https://stackblitz.com/edit/angular-h4df6q

正如我所见，问题出在 CSS 中。没有我的 CSS，它可以正常工作

Answer 1

现在我明白了这个问题。

每个组件实例都会呈现 <input id="photo"> 。因为每个输入都有相同的 id“照片”，所以 <label for="photo">仅指具有该 id 的第一个输入。

这是正在发生的事情的演示。尝试单击每个标签并查看哪个输入获得焦点:

<div>
  <label for="input">Label for #input</label>
  <input id="input" />
</div>

<div>
  <label for="input">Label for #input</label>
  <input id="input" />
</div>

<div>
  <label for="input1">Label for #input1</label>
  <input id="input1" />
</div>

<div>
  <label for="input2">Label for #input 2</label>
  <input id="input2" />
</div>

要解决此问题，请为每个输入指定一个唯一的 ID，并将该相同的 ID 传递给相应的标签:

<div class="polaroid">
  <label for="photo{{photoNumber}}" class="cursor-pointer">
    <img [src]="url" class="img-fluid" alt="">
  </label>
  <div class="img-title-bot">
    Nr {{photoNumber}}.
  </div>
  <input type="file" id="photo{{photoNumber}}" (change)="onSelectFile($event)">
</div>