渲染后超链接的点击功能不可用

问题描述

我做了一些字符串操作，想创建一个如下所示的字符串。 [sample] 和 [express] 是超链接。

<a> 元素应该具有 click 函数并且它应该调用 searchFromURL()。
但是一旦呈现，click 函数就无法使用，这背后的原因可能是什么？

或者有其他方法可以做到这一点吗？

home.page.html
<ion-row innerHTML="{{buildNavigationSearchElement(dicDat.translation)}}"></ion-row>

home.page.ts

buildNavigationSearchElement(elementText: String){
    let retElem = elementText + '<a href="#" (click)="searchFromURL();">Search Text</a>';
    return retElem;
  }

有没有最安全的方法用 click 函数构建这个元素？

解决方法

最后我想出了这个解决方案。如下生成超链接。

home.page.html

<div [innerHTML]="buildNavigationSearchElement()"></div>

home.page.ts

buildNavigationSearchElement(){
let myText = This is a + '<a class="myhyperlink_1">sample</a>' + text to + '<a class="myhyperlink_2">express</a>' + my issue.
return myText;
}

在 ngAfterViewChecked() 事件中，每个超链接都绑定到一个类方法。

ngAfterViewChecked() {
   var myElements = 
   this.elementRef.nativeElement.querySelectorAll('[class^="myhyperlink"]');
   var i: number;
   for (i = 0; i < myElements.length; i++) {
       myElements[i].addEventListener('click',this.openAlert.bind(this));
   }
}

属性数组存储在类中，其中包含每个超链接的操作和参数。

openAlert(parameter: any) {
   let className = parameter.srcElement.className;
   //do what ever required
}