Ionic 4 的 "ios" 模式下列表项的详细箭头

Question

使用最新版本的 Ionic，列表项出现小问题。根据 ion-item 的文档，对于 detail 属性:

If true, a detail arrow will appear on the item. Defaults to false unless the mode is ios and an href, onclick or button property is present.

我使用的是默认设置，这在 href 下工作正常，但是当我使用 (click) 时，它不会显示在 "ios" 模式下。代码是：

<ion-item (click)="saveContact()">

我是不是做错了什么让它与点击处理程序一起工作？

Answer 1

我查看了源代码，它似乎是 Ionic (v 4.1.0) 的错误。这是来自源代码，似乎如果模式设置为 "ios" 和 isClickable，则会显示详细信息箭头。

isClickable() 似乎不正确，因为它没有考虑 "onClick" 并且只是查找 href 以及按钮属性是否设置为 true。如果 button 设置为 true 或 href 已通过，我会看到带有 ios 模式的箭头。

 private isClickable(): boolean {
    return (this.href !== undefined || this.button);
  }

然后在第 153 行的渲染方法中，设置 showDetail 布尔值（显示箭头）时：

const clickable = this.isClickable();
    const TagType = clickable ? (href === undefined ? 'button' : 'a') : 'div' as any;
    const attrs = TagType === 'button' ? { type } : { href };
    const showDetail = detail !== undefined ? detail : mode === 'ios' && clickable;

参考：

https://github.com/ionic-team/ionic/blob/master/core/src/components/item/item.tsx

Ionic 4 的 "ios" 模式下列表项的详细箭头

Detail Arrows for List Items in Ionic 4's "ios" Mode

ionic-framework

ionic4