Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

content: ion-tabs in angular doesn't use the custom event interface

Aperta
  • Qualcosa non va?
#3,413 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
35/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Ferma
Stack tecnologico
angular, typescript
Ambito
frontend

Direzione di ricerca

Inizia con core/src/components/tabs/tabs-interface.ts e core/src/components/tabs/tabs.tsx, quindi esamina come il binding Angular espone ionTabsWillChange e ionTabsDidChange. Verifica il tipo dell’event handler usando l’esempio di template Angular; il lavoro è completato quando l’handler accetta TabsCustomEvent senza l’errore TypeScript segnalato.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

content package: angular
Prerequisites
Ionic Framework Version

v7.x

Current Behavior

ion-tabs has a custom event TabsCustomEvent but its not used anywhere:

export interface TabsCustomEvent extends CustomEvent {
  detail: { tab: string };
  target: HTMLIonTabsElement;
}

The two events on the component just define their own object:

  /**
   * Emitted when the navigation is about to transition to a new component.
   */
  @Event({ bubbles: false }) ionTabsWillChange!: EventEmitter<{ tab: string }>;

  /**
   * Emitted when the navigation has finished transitioning to a new component.
   */
  @Event({ bubbles: false }) ionTabsDidChange!: EventEmitter<{ tab: string }>;
Expected Behavior

It should use the custom event.

Steps to Reproduce

Define an ion-tab and attempt to handle the event on it such as:

Markup

<ion-tabs (ionTabsDidChange)="onTabsDidChange($event)">
</ion-tabs>

Code

  onTabsDidChange(event: TabsCustomEvent) {
  }

Error

Argument of type '{ tab: string; }' is not assignable to parameter of type 'TabsCustomEvent'.
  Type '{ tab: string; }' is missing the following properties from type 'TabsCustomEvent': detail, target, initCustomEvent, bubbles, and 20 more.ngtsc(2345)
tabs.page.ts(6, 3): Error occurs in the template of component TabsPage.
Code Reproduction URL

No response

Ionic Info
Ionic:

   Ionic CLI                     : 7.1.5 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 7.6.6
   @angular-devkit/build-angular : 16.2.12
   @angular-devkit/schematics    : 16.2.12
   @angular/cli                  : 16.2.12
   @ionic/angular-toolkit        : 9.0.0

Capacitor:

   Capacitor CLI      : 5.6.0
   @capacitor/android : 5.6.0
   @capacitor/core    : 5.6.0
   @capacitor/ios     : 5.6.0

Utility:

   cordova-res : not installed globally
   native-run  : 2.0.1

System:

   NodeJS : v18.12.0 (/usr/local/bin/node)
   npm    : 8.19.2
   OS     : macOS Unknown
Additional Information

No response

Lingua principale
MDX
Stelle
621
Fork
3.2k
Merge medio
1g 6h
PR unite (30g)
65

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di ionic-team/ionic-docs

Tutte le issue di ionic-team/ionic-docs

Issue simili

Altre issue su Web Dev

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.