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'和{{1} }。

我的问题是，无论我与'#this-user-idbook-preview'还是#idBook进行交互，似乎#userIdBook总是在替换其他元素。在#idBook中测试字符串时，即使单击第二个元素，也总是得到onImageLoaded。另外，只有第一个元素的变量被修改，第二个元素始终不变。

这是什么问题？以及如何解决？

编辑：UploadButtonComponent代码

'#this-idbook-preview'

编辑2：迷你项目

我创建了一个迷你项目来显示问题，链接位于https://drive.google.com/open?id=1yafbuiKYUQ-POeNAXHu0ATyo8l84ydCE

Answer 1

使用Angular，您必须小心使用本机HTML规则。其中之一是您不得具有相同ID的多个元素。在这里，您在组件内部使用了一个常量ID，因此，当您使用此ID时，它们都会触发第一个组件（该组件包含具有该ID的页面的第一个元素）。
因此，您有2种解决方案。

调用上载按钮的组件为他提供了唯一的ID。如果您忘记了每个ID必须都是唯一的，则可能会很危险。
做一些事情以确保不会使用计数器重复使用相同的ID

您可以这样做：

// 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>

一个父对象中有两个相同的组件，第一个覆盖第二个

1 个答案: