Избегайте проблем с пузырьками событий, см. Дополнительную информацию об использовании заголовка типа в IE11

#html #angular #bootstrap-4 #angular-ui-bootstrap

Вопрос:

У меня есть компонент поиска ввода, в котором есть поле ввода typeahead. input-search.component.html

 <input [typeahead]="data" [typeaheadItemTemplate]="sampleTemplate"  (typeaheadOnSelect)="selectedListItem(event$)"/>
 

и образец шаблона содержит текстовое поле для отображения данных, и в нем есть кнопка «Просмотреть все».

 <ng-template #sampleTemplate let-model ="item" let-index="index"><label>model.name</label><button *ngIf="index === maximumCount" (click)="callSeeAllFunction()"> see all results</button></ng-template>
 

Поэтому, если мы нажмем на любой из выбранных элементов списка, будет активирован элемент(событие$). К сожалению, при нажатии на кнопку просмотреть все результаты selectedListItem(событие$) вызывается вместо callSeeAllFunction() в IE11.

Добавили event.stopPropagation() внутри функции callSeeAllFunction ().