3

我创建了一个带有事件的组件，我们称之为（onAction）。在同一个父组件或页面中，它在两个地方使用（它们本身就是组件）。不同之处在于 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。

4

2 回答 2

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" />
于 2019-04-29T05:21:09.013 回答
0

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

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

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

于 2019-04-29T02:35:03.893 回答