Question

我有一个带有标签的复选框，即使单击了标签，Ionic也会触发该复选框事件。

我将动态HTML绑定到这样的标签上：

<ion-label [innerHTML]="htmlString"></ion-label>

，并且htmlString可以包含<a>元素。当用户单击这些元素时，一定会发生。我试图做到这一点而无需将事件处理程序手动绑定到<a>元素：

checkBoxEvent(e){
     if ((e.target as HTMLElement).tagName === 'A') {
      alert('link found')
    }
  }

但是找不到链接。有什么建议吗？

这是一个可行的/可编辑的示例： https://stackblitz.com/edit/ionic-kdzcwt?file=pages%2Fhome%2Fhome.ts

编辑：很抱歉，如果不清楚，但是我只需要在单击链接时显示警报。单击标签的其他部分时，警报不应显示。

Answer 1

在示例链接中，e是undefined，因为您没有将$event作为checkBoxEvent()函数的参数传递。在 html模板文件中，您应将<ion-checkbox (click)="checkBoxEvent()" ></ion-checkbox>替换为<ion-checkbox (click)="checkBoxEvent($event)" ></ion-checkbox>。

此外，(e.target as HTMLElement).tagName不是'A'，而是'BUTTON'。我认为这是由ion-checkbox的实施引起的。因此，您还应该将if ((e.target as HTMLElement).tagName === 'A')替换为if ((e.target as HTMLElement).tagName === 'BUTTON')，以获取所需的内容。

更新

以下元素覆盖了您的 innerHTML ，因此点击事件被拦截。

<button class="item-cover item-cover-md item-cover-default item-cover-default-md" ...> ...</button>

所以一种方法是将z-index添加到ion-label并为a标签元素添加事件监听器。但是，如果要使复选框正常工作，则应添加比下面更多的代码。

.html

<ion-label style="z-index:100;" #ref ></ion-label>
<ion-checkbox></ion-checkbox>

.ts

@ViewChild('ref') ref: ElementRef;
ngAfterViewInit() {
    this.ref.nativeElement.innerHTML = "This is a test label to test <a>link</a> click events";
    this.render.listen(this.ref.nativeElement.getElementsByTagName('a')[0],'click',()=>{alert('link found')})
}

另一种方式是按照 @Duannx 所说使用经典的checkbox和label。这样可以为您提供更精美的代码，但使您编写更多的样式代码。

Answer 2

使用ViewChild引用离子标签成分

 <ion-label #ref ></ion-label>

如果要在链接的前面添加Dyanamic数据，则在链接之后需要使用如下三个元素

  <span #ref></span>
  <a #anchor (click)="onClick()" ></a>
  <span #las></span>

我正在使用“模板引用到离子”复选框，以便在单击链接时可以切换

  <ion-checkbox  #checkbox> </ion-checkbox>

component.ts

  onClick(){
         this.checkbox.checked=!this.checkbox.checked;
  }
  ngAfterViewInit(){
          this.ref.nativeElement.innerHTML=`This is a test label to test`;
          this.anchor.nativeElement.innerHTML=`link`;
          this.las.nativeElement.innerHTML=`click events`;
  }

示例：https://stackblitz.com/edit/ionic-tmizxm

离子查找是否通过父母点击事件点击了一个孩子

2 个答案: