Angular中如何仅禁用首页面Previous锚点与末页面Next锚点？

要实现真正阻止锚点点击、同时保留cursor:not-allowed样式的需求，可以通过事件条件拦截+样式绑定的方式实现，具体步骤如下：

1. 更新组件类（TypeScript） #

添加判断禁用状态的方法，并在分页逻辑中增加安全校验：

active_flag = 0;
max_list = 4;

// 判断上一页是否禁用
isPreviousDisabled(): boolean {
  return this.active_flag === 0;
}

// 判断下一页是否禁用
isNextDisabled(): boolean {
  return this.active_flag === this.max_list;
}

mActive(arg: boolean) {
  if (arg) {
    // 下一页：仅当未到最后一页时执行
    if (!this.isNextDisabled()) {
      this.active_flag++;
    }
  } else {
    // 上一页：仅当未到第一页时执行
    if (!this.isPreviousDisabled()) {
      this.active_flag--;
    }
  }
}

2. 修改模板（HTML） #

在锚点的点击事件中添加条件拦截，同时绑定禁用样式类：

<div style="float: left">
  <a 
    (click)="!isPreviousDisabled() && mActive(false)" 
    [class.disabled]="isPreviousDisabled()"
    class="previous"
  >
    &laquo; Previous 
  </a>
</div>
<div style="float: right">
  <a 
    (click)="!isNextDisabled() && mActive(true)" 
    [class.disabled]="isNextDisabled()"
    class="next"
  >
    Next &raquo;
  </a>
</div>

3. 添加禁用样式（CSS） #

在组件样式或全局样式中定义禁用状态的视觉效果：

a.disabled {
  cursor: not-allowed;
  opacity: 0.6;
  color: #999; /* 可选：增强视觉禁用提示 */
}

原理说明 #

• 真正阻止点击：通过!isPreviousDisabled() && mActive(false)的逻辑，当按钮处于禁用状态时，点击事件不会触发mActive方法；同时在mActive内部再次校验，防止通过代码直接调用方法导致分页越界。
• 保留光标样式：不使用pointer-events: none，而是通过CSS类直接设置cursor:not-allowed，确保光标样式正常生效。

内容的提问来源于stack exchange，提问作者Vishnudhasan Govindarajan