Tengo una aplicación con 4 pestañas de iones como el siguiente ejemplo:

Me gustaría que, en algunos casos, deshabilite la pestaña de iones y si el usuario intenta hacer clic en estas pestañas deshabilitadas, la aplicación mostrará un mensaje modal para ellos. Como ya sabemos, si deshabilitamos una "pestaña de iones: o un" botón ", no podemos obtener el eventLister. Así que estoy tratando de obtener este evento de clic y stopPropagation () pero no funciona. ¿Podrían ayudarme? ¿yo?

echa un vistazo a mi código

#Mis pestañas de iones

 <ion-tabs #myTabs *ngIf="showTabs"> <ion-tab *ngFor="let tab of tabs" [root]="tab.root" [tabTitle]="tab.title" [tabIcon]="tab.icon" (ionSelect)="selectPage($event)" (ionChange)=selectedTab($event)></ion-tab>

#en mi archivo .ts probé esto, obtuve todos los elementos de pestañas y puse un estilo css para simular deshabilitado agregando una clase ''.isDisabled'

 const tabs = document.querySelectorAll('.tab-button'); for (let i = 1; i < tabs.length; i++) { tabs[i].classList.add('isDisabled'); }

aquí estoy tratando de colocar el elemento de pestaña en la posición 1 y obtener el eventLister

 tabs[1].addEventListener('click', function (e) { e.stopPropagation(); alert('teste'); });

Puedo obtener este eventListener pero e.stopPropagation() no funciona.

alguna sugerencia para ayudarme? Gracias. ;)

$css

 .isDisabled { cursor: not-allowed; position: relative; opacity: 0.5; text-decoration: none; //pointer-events: none; }