angular - ng-template 中组件的 EventEmitter 被组件的不同实例捕获

Question

我创建了一个带有事件的组件，我们称之为 (onAction)。在同一个父组件或页面中，它被用在两个地方(它们本身就是组件)。不同之处在于在 ng-template 中使用了一个地方，它在模态中使用(准确地说是来自 angular - bootstrap4 库的 NgbModal)。

不在 ng-template 中的那个工作正常。但是，当 ng-template 中的事件被触发时，就好像它没有与 onActionB 绑定(bind)并且事件被其他组件捕获。

这里有一些通用代码要清楚，为了简单起见，我们称它为组件“comp”，以及使用它的两个父组件“parentA”和“parentB”

<parentA>
...
   <comp (onAction)="onActionA($event)"></comp>
...
</parentA>

<parentB>
...
   <ng-template #someModal>
     <comp (onAction)="onActionB($event)"></comp>
   </ng-template>
...
</parentB>

当呈现#someModal 时，就好像 (onAction) 与 parentA 中的 onActionA 绑定(bind)。它触发 onActionA($event) 而不是 onActionB($event)。奇怪的是，如果我在 parentA 中注释掉 comp，那么 parentB 中的 onActionB 就会被触发。

Answer 1

我终于找到了自己的答案:

原因是我的组件中有以下模板代码:

<label for="file-uploader" >
  <i class="fas fa-paperclip"></i> Upload File
</label>
<input #fileUploaderInput id="file-uploader" type="file" />

与标签链接的输入中的相同 id 触发相同的文件更改事件。解决方法是为每个组件实例生成一个随机 ID，以便它们在当前 View 中是唯一的:

<label for="file-uploader-{{randomId}}" >
  <i class="fas fa-paperclip"></i> Upload File
</label>
<input #fileUploaderInput id="file-uploader-{{randomId}}" type="file" />