Angular 离子标签点击不工作

有时候我不明白为什么爱奥尼亚是如此顽固。我有一个输入和一个标签堆叠在一起：

<ion-item>
<ion-label stacked (click)="labelClick($event)" [innerHTML]="htmlString"></ion-label>
<ion-input  ></ion-input>

而

labelClick（）

函数无论如何都不会触发

我是否可以通过单击标签启动该功能？不改变外观/使用的零部件

下面是一个stackblitz，其中的代码表明它不起作用：

---

因此，在您的情况下，问题是ion input正在“接管”其输入侦听器，而您的链接相关（单击）侦听器不再“听到”

我会尝试使用这种方法：使用离子卡（或网格）或div来清晰地划分用户输入区域和您的问题文本/字符串

以下是stackblitz：

---

经过长时间的调查，我发现问题出在这种风格上（通过查看离子标签可以看出）：

因此，解决办法是：

.item-input ion-label{
  pointer-events:all!important;
}

/* Ionic 5 */
.item-input ion-label {
   position: absolute;
}

连同：

 .item-cover{
  display:none;
}

---

这可以通过以下两种方式完成：
1] 如果您希望在同一离子项目中同时使用离子标签和离子输入：
已经观察到，如果带有“离子标签”和“离子输入”的离子项一起影响标签侦听器，则会由于“指针事件”CSS而影响标签侦听器。默认情况下，添加“指针事件：无”。因此，如果希望click listener正常工作，则需要通过添加以下代码来覆盖此样式：

<ion-item>
   <ion-label class="clickEnableCls" stacked (click)="labelClick($event)" [innerHTML]="htmlString"></ion-label>
   <ion-input  ></ion-input>
</ion-item>

2] 可以通过在两个不同的离子项目中设置离子标签和离子输入，如下所示：

<ion-item>
   <ion-label stacked (click)="labelClick($event)" [innerHTML]="htmlString"></ion-label>
</ion-item>
<ion-item>
    <ion-input  ></ion-input>
</ion-item>

---

我在离子菜单的离子列表中尝试将离子项与单击处理程序一起使用时遇到了类似的问题。
我的模板看起来像：

<ion-menu>
  <ion-list>
    <ion-item button (click)="myFunc()">A Clickable Menu Item</ion-item>
  </ion-list>
</ion-menu>

我的解决方案和我认为一个相当简单和灵活的解决方案是添加以下全局样式：

ion-item[button] {
    pointer-events: initial !important;
}

---

在Ionic 4.11.0中也遇到了这个问题

这一点帮助了我。它仍然会收到离子标签的完整点击事件，但是

标签的z索引更高，因此首先点击：

/* Ionic 4 */
.ion-activatable {
  ion-label {
    a {
      position: relative;
      z-index: 10;
    }
  }
}

解决办法是：

.item-input ion-label{
  pointer-events:all!important;
}

/* Ionic 5 */
.item-input ion-label {
   position: absolute;
}

---

你能分享一下你的用例和你想要达到的目标吗？爱奥尼亚是非常灵活的，只是有时会有细微差别。因此，您可能会遇到一些“边缘情况”，这就是您可能的感受。单击标签时，我需要在labelClick（）方法中检查是否单击了链接（通过event.target）。如果它被点击了，我应该显示一个链接的解释作为工具提示。但是，如果单击标签的任何其他部分，工具提示不应显示。那么，为什么要使用离子输入？抱歉，您的上下文仍然模糊，您描述的内容可以以不同的方式实现，但我看到您使用的是离子输入-这是否意味着您允许用户输入带有可能链接的任意文本？因此，标签用于问题，问题可以有一些可解释的词，这就是为什么我需要显示工具提示的原因。但是输入的是问题的答案，必须用纯文本书写。基本上，在我的实际项目中，更改这个离子标签和离子输入将意味着html和CSS代码的巨大更改，这将需要几天的时间。在这个需求出现之前，一切都很好，但令人失望的是，这并不是说高级功能似乎不可能实现。我明白了，让我试试看，但我认为输入侦听器不会接管。这意味着我可以将侦听器附加到输入，当我单击标签时，将触发侦听器函数。我不明白爱奥尼亚是如何让标签不可贴在活动上的，这是怎么可能的这些卡片会因为它们戏剧性地改变了布局而不起作用让我再试一件事：）所以你需要把它列为一个列表？对不起，没关系，我接受我自己的答案，因为这是第一个答案。