如何通过单击文本(不是按钮)来触发函数 href 不起作用

Question

我有一行文本(动态(。当用户点击它时，它会触发一个函数。当我不使用标签时，它就起作用了。当我添加标签的那一刻(我希望它看起来像一个链接，即使不是(，当用户点击文本时，它就会进入主页。以下是我尝试过的两种方法：

<mat-list-item><b class="title"><a href="#" onclick="downloadFile(batchList.dataPath)" class="dlLink" >Data Path:{{batchList.dataPath}}</a></b> 
//this just redirects to the homepage
<mat-list-item (click)="downloadFile(batchList.dataPath)"><b class="title">Data Path:{{batchList.dataPath}} </b>
//this works, as in the function is fired. But it doesn't act like a link, which I want. I've tried using stop propogation, by adding it to the end of my function, like so:
downloadFile(pathToDownload) {
this.showLoader = true;
console.log(pathToDownload);
from(this.downloadFileService.downloadFile({'pathToDownload': pathToDownload}))
.subscribe((data: any) => {
saveAs(new Blob([data], {type: 'application/octet-stream'}), (pathToDownload.substring(pathToDownload.indexOf('part'))));
this.showLoader = false;
setTimeout(() => {
}, 300000)
})
event.stopPropagation();
}
//but it doesn't work. 

有什么想法吗？

Answer 1

这可能是因为您正在使用onClick，而应该使用(click)。请参考以下示例。

<a href="javascript:void(0);" (click)="downloadFile()" class="dlLink" >Data Path:{{batchList.dataPath}}</a>

Stacklitz示例