Angular中如何通过单个按钮点击切换执行订阅与取消订阅对应方法

有两种常用实现方案可以满足需求：

方案1：直接在模板中通过三元表达式分支调用 #

你模板里已经有状态判断的逻辑，直接把click事件的调用逻辑改成条件判断即可，修改后的代码如下：

<button matRipple type="button" class="btn btn-outline-success my-sm-0 mx-2 d-flex shadow-none"
        (click)="User.subscriptions.indexOf(selectedTab) == -1 ? userSubscribtions(selectedTab) : delSubscription(selectedTab)" 
        [disabled]="loading">
        <ng-container *ngIf="User.subscriptions.indexOf(selectedTab) == -1">
          <span class="material-icons">notifications</span>
          订阅
        </ng-container>
        <ng-container *ngIf="User.subscriptions.indexOf(selectedTab) != -1">
          <span class="material-icons">notifications_off</span>
          取消订阅
        </ng-container>
</button>

提示：你可以把重复的判断逻辑抽成组件的计算属性，减少模板中的重复代码，比如在ts中定义一个isSubscribed()方法返回判断结果，模板中直接调用即可

方案2：在原有userSubscribtions方法中做分支处理 #

如果不想改动模板代码，可以直接在ts文件的userSubscribtions方法里加状态判断，逻辑示例如下：

userSubscribtions(selectedTab: any) {
  // 先判断当前是否已订阅
  const isSubscribed = this.User.subscriptions.indexOf(selectedTab) !== -1;
  if (isSubscribed) {
    // 已订阅状态走取消订阅逻辑
    this.delSubscription(selectedTab);
    return;
  }
  // 原有订阅逻辑保留
  // ... 原有代码
}

这种方案后续如果要加点击前的二次确认、埋点等通用逻辑会更方便。

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