angular8页面无法跳转（点击按钮后仍停留在同一页面）。 _编程开发

创始人

2024-10-22 15:02:30

0次

确认路由是否设置正确，是否存在任何干扰路由跳转的拦截器等。可以在调试工具中查看console输出，检查路由是否被正确调用。如果存在拦截器，可以检查拦截器中是否存在阻止路由跳转的逻辑。
在模板文件（HTML）中检查按钮是否正确绑定到其相应的点击事件处理程序。示例如下：

HTML文件：

组件文件：

onButtonClick() { this.router.navigate(['/target-page']); }

确认是否存在防止多次重复点击操作的逻辑，比如使用了防抖或节流函数。这些函数可能会导致非常短时间内多次点击只被认为是一次点击而忽略了其他操作，从而导致页面没有实际跳转。可以通过使用setTimeout或者其他方式来解决这个问题。示例如下：

HTML文件：

组件文件：

isButtonDisabled = false;

onButtonClick() { if (this.isButtonDisabled) { return; }

this.isButtonDisabled = true;

setTimeout(() => { this.router.navigate(['/target-page']); this.isButtonDisabled = false; }, 1000); }

在这里，首先通过禁用按钮来禁止多次重复点击，然后使用setTimeout函数将路由跳转延迟一定时间，以便所有操作都能正常完成，从而确保页面成功跳转。