ionic-team / ionic-team/ionic-framework

bug: IonItem styling wrong when standalone angular component is used with routerLink

未关闭
#30,394 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
triage
主要语言
TypeScript
星标
52.7k
派生
13.3k
平均合并
1 天 15 小时
30 天内合并 PR
51

描述

### Prerequisites

- [x] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/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

v8.x

### Current Behavior

Given an ion-item tag with a `routerLink` on it, when a standalone angular component only imports the `IonItem` component, the `ion-activatable` and `ion-focusable` classes are not generated, giving the element a text-like feel. When the whole `IonicModule` is imported, the two classes above are generated, giving the element a button-like feel.

### Expected Behavior

Regardless of whether `IonItem` or `IonicModule` is imported, the generated HTML element behaves the same way and generates with pointer cursor and alternative hovering color when a `routerLink` is defined.

### Steps to Reproduce

Just hover over the generated `ion-item`. When the `IonItem` is imported, the cursor remains an arrow and the background color does not change. When the `IonicModule` is imported, the cursor changes into a pointer and the background color changes towards gray.

### Code Reproduction URL

https://stackblitz.com/edit/prza28ny?file=src%2Fapp%2Fexample.component.html,src%2Fapp%2Fexample.component.ts,src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.routes.ts

### Ionic Info

Don't know how to do that on stackblitz.

### Additional Information

My current workaround is that I add `href="#" (click)="(false)"` to the element, but it would be nicer if I didn't have to do it.

贡献指南

打开贡献指南

调研方向

Start with the StackBlitz reproduction, especially src/app/example.component.html and src/app/example.component.ts, and compare standalone IonItem imports with IonicModule in the corresponding app files. Inspect how IonItem and routerLink produce the generated classes, then verify that both import styles produce the same hover and pointer behavior. Done means the regression is covered and the reproduction behaves consistently.

由索引模型根据 Issue 内容生成。

评估

技术栈
angular, typescript
领域
frontend
Issue 类型
缺陷
难度
3/5
预计耗时
1-2 天
活跃度
停滞
描述清晰度
基本清楚
新手友好度
38/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。