ng模板中组件的事件发射器，由组件的不同实例捕获

Question

我创建了一个带有事件的组件，让我们调用它(onAction(。 在同一父组件或页面中，它在两个位置使用(它们本身就是组件(。 区别在于在ng模板中使用了一个地方，该模板用于模态(确切地说是角度的NgbModal-bootstrap4库(。

不在 ng 模板中的那个工作正常。 但是，当 ng-template 中的事件被触发时，就好像它没有与 onActionB 绑定并且该事件被另一个组件捕获一样。

这里有一些需要明确的通用代码，为了简单起见，让我们称它为组件"comp"，以及使用它的两个父组件"parentA"和"parentB">

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

当呈现 #someModal 时，就好像 (onAction( 与父 A 中的 onActionA 绑定在一起。 它触发 onActionA($event( 而不是 onActionB($event(。 奇怪的是，如果我注释掉父项 A 中的合成，则触发父项 B 中的操作 B。

Answer 1

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

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

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

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

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

Answer 2

为了调查您的问题，我创建了这个堆栈闪电战

https://stackblitz.com/edit/angular-p89q3z?file=src%2Fapp%2Fapp.component.html

我没有看到您描述的问题，因为单击模板中的内容触发器 onActionB