Question

我创建了一个带有事件的组件，我们称之为（onAction）。在同一个父组件或页面中，在两个地方（组件本身）使用它。区别在于ng模板中使用了一个位置，而ng-template中使用的是模态（确切地说是angular-bootstrap4库中的NgbModal）。

不在ng-template内的那个可以正常工作。但是，当触发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）与parentA中的onActionA绑定一样。它触发onActionA（$ event）而不是onActionB（$ event）。奇怪的是，如果我注释掉parentA中的comp，则触发parentB中的onActionB。

Answer 1

为了调查您的问题，我创建了这个StackBlitz

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

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

Answer 2

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

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

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

ng-template中的组件的EventEmitter被组件的另一个实例捕获

2 个答案: