用点击事件替换href

Question

我的新闻文章包含一些带有href的锚标记，因此我无法在基于href的ionic 3应用程序中导航。 因此，我必须做的是必须将所有href替换为click事件，并将href值作为参数传递给该函数。 因此，基于参数，我可以推送到应用程序中的其他页面。

我收到这样的文章。

Here it is some news article with <a href="tickcharts.php" ></a> and one more link like <a href="kalender.php" ></a> like this.

我必须做到这一点

Here it is some news article with <a (click)="handlefunction(tickcharts.php)" ></a> and one more link like <a (click)="handlefunction(kalender.php)" ></a> like this.

这样我就可以轻松地根据函数参数进行导航。

handlefunction(navpage){
if(navpage == 'tickcharts.php'){
// Navigate to tickcharts page in my app
}else if(navpage == 'kalender.php'){
// Navigate to kalender page
}
}

这篇新闻来自我的mysql数据库。如果可能的话，我们可以在查询中替换它，但是怎么办呢？

请帮助我摆脱困境。

Answer 1

我对ionic并不熟悉，但是如果有帮助，我可以为您提供通用的JavaScript解决方案：

window.addEventListener('click', event => {
    if (!event.target.hasAttribute('href')) return true;

    event.preventDefault();
    handlefunction(event.target.getAttribute('href'));
    return false;
});

这将捕获窗口级别的所有click事件，如果该事件起源于具有href属性的元素，则它将取消默认操作（即浏览器导航），并将href传递给您的handlefunction() 。

Answer 2

您可以使用Router来解决您的问题

的HTML

<a (click)="handlefunction(tickcharts.php)" 

TS

constructor(private route: Router){

}

handlefunction(tickcharts){
if(navpage == 'tickcharts.php'){
 this.route.NavigateByUrl('PROVIDE URL');
}else if(navpage == 'kalender.php'){
this.route.NavigateByUrl('PROVIDE URL');
}
}

Answer 3

你可以做：

 const handlefunction = href => console.log(href); document .querySelectorAll('a') .forEach(link => { link.addEventListener('click',e => { e.preventDefault(); handlefunction(e.target.getAttribute('href')); }); }); 

 Here it is some news article with <a href="tickcharts.php">tickcharts</a> and one more link like <a href="kalender.php">kalender</a> like this. 

Answer 4

最简单的方法是：

handlefunction(){
window.open("path/to/your/tickcharts.php", "_blank"); //if you need it in new tab
window.location.open("path/to/your/tickcharts.php"); //in same tab
}

Answer 5

谢谢您的投入，我得到了这样的解决方案。

首先，我在后端有过滤器数据，已将所有href替换为class。

var anchors = this.element.nativeElement.getElementsByTagName('a');
    if (length != 0) {
      for (var i = 0, length = anchors.length; i < length; i++) {
        var anchor = anchors[i];
        anchor.addEventListener('click', this.handlelinks.bind(this))
      };
    }
  }

  handlelinks(transition) {
     var navUrl =  transition.srcElement.classList[0];
     if(navUrl == 'tickcharts.php'){
      // go to tickcharts page
    } 
  }