ionic-team / ionic-team/ionic-docs

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

Đang mở
#3,413 1 bình luận 0 reaction 0 người được giao Xem trên GitHub
content package: angular
Ngôn ngữ chính
MDX
Star
621
Fork
3.2k
Merge trung bình
1 ngày 2 giờ
Pull request đã merge (30 ngày)
86

Mô tả

### Prerequisites

- [X] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#creating-an-issue).
- [X] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [X] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already report this problem, without success.

### Ionic Framework Version

v7.x

### Current Behavior

`ion-tabs` has [a custom event](https://github.com/ionic-team/ionic-framework/blob/9448783bb19b187f867054c86d215e3dc97952c1/core/src/components/tabs/tabs-interface.ts) `TabsCustomEvent` but its not used anywhere:

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

The two [events](https://github.com/ionic-team/ionic-framework/blob/9448783bb19b187f867054c86d215e3dc97952c1/core/src/components/tabs/tabs.tsx
) 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

```

```

## 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_

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.