EventEmitter компонента в ng-шаблоне, пойманный другим экземпляром компонента

Question

Я создал компонент с событием, давайте вызовем его (onAction). Внутри одного и того же родительского компонента или страницы он используется в двух местах (которые сами являются компонентами). Разница лишь в том, что в ng-шаблоне используется одно место, которое используется в модальном режиме (точнее, NgbModal из библиотеки angular - bootstrap4).

Тот, которого нет в ng-шаблоне, работает нормально. Тем не менее, когда событие внутри ng-шаблона запускается, оно как будто не связано с 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) связывается с onActionA в parentA. Он вызывает onActionA ($ event) вместо onActionB ($ event). Странно то, что если я закомментирую comp в parentA, то активируется onActionB в parentB.

Answer 1

Я наконец нашел свой собственный ответ:

Причина была в следующем коде шаблона в моем компоненте:

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

Тот же идентификатор во входе, связанный с меткой, вызывает то же самоесобытие изменения файла.Исправление заключается в создании случайного идентификатора для каждого экземпляра компонента, чтобы они были уникальными для текущего представления:

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

Answer 2

Чтобы исследовать вашу проблему, я создал этот StackBlitz

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

Я не вижу проблемы, которую вы описываете как нажатие на содержимое в триггерах шаблона на ActionB