Question

我有一个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>

app-advert-photo-element 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>

app-advert-photo-element.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>

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

1 个答案: