Angular 8中如何点击文本触发函数调用且不触发页面重载

你的问题由两个错误用法导致：

1. 原生onclick只能调用全局作用域下的函数，无法绑定Angular组件类中定义的Typescript方法
2. 空值href属性会触发浏览器默认跳转行为，导致页面重载

推荐方案1：使用Angular原生事件绑定+阻止默认行为 #

直接修改a标签代码如下：

<a href="javascript:void(0)" (click)="resendOTP()"> Resend OTP.</a>

说明：

• 用Angular内置的(click)语法替换原生onclick，可以直接绑定组件TS文件中定义的resendOTP方法
• href="javascript:void(0)"会告知浏览器点击该链接无需跳转，不会触发页面重载

如果不想修改href属性，也可以直接在事件回调中阻止默认行为：

<a href="" (click)="resendOTP(); $event.preventDefault()"> Resend OTP.</a>

方案2：用span模拟a标签样式 #

如果不需要a标签的语义特性，直接用span加样式实现完全一致的视觉效果，从根源上避免跳转问题：

<span class="resend-link" (click)="resendOTP()"> Resend OTP.</span>

对应CSS样式：

.resend-link {
  color: #007bff;
  text-decoration: underline;
  cursor: pointer;
}

旧方案失效原因说明 #

• 你之前使用onclick="return false"只会阻止跳转，但原生onclick无法调用TS文件中定义的组件方法，所以功能不生效
• routerLink是Angular提供的路由跳转专用属性，你没有路由跳转需求不需要使用，强行使用只会触发不必要的页面重载

内容的提问来源于stack exchange，提问作者Raspberry Lemon