ionic-team / ionic-team/ionic-framework
bug: IonItem styling wrong when standalone angular component is used with routerLink
- 主要语言
- 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