Angular中基于条件动态显示多条提示信息的优化实践

<div *ngIf="!assessmentDetailsObj" placement="top-right" [mtTooltip]="(!lob || lob === undefined) ? disabledLOBContent : (isTrueSet ? refVar : '')">
  <button
    *ngIf="!assessmentDetailsObj"
    [disabled]="(!lob || lob === undefined)"
    class="btn btn-primary"
    aria-label="Accept"
    (click)="create()"
  >
    Create
  </button>
</div>
<ng-template #disabledLOBContent>请选择业务线 (LOB)</ng-template>
<ng-template #refVar>请选择终端 (Endpoints)</ng-template>
<!-- 随着条件增多，需要更多 ng-template 和更复杂的绑定逻辑 -->

<ng-template #tooltipContentTemplate>
  <ng-container *ngIf="myCondition1">请选择业务线 (LOB)</ng-container>
  <ng-container *ngIf="myCondition2">请选择终端 (Endpoints)</ng-container>
  <ng-container *ngIf="myCondition3">这是一个不同的提示信息</ng-container>
  <!-- 可以添加一个默认消息，当所有条件都不满足时显示 -->
  <ng-container *ngIf="!myCondition1 && !myCondition2 && !myCondition3">
    点击以执行操作
  </ng-container>
</ng-template>

<div placement="top-right" [mtTooltip]="tooltipContentTemplate">
  <button
    [disabled]="shouldDisableButton()"
    class="btn btn-primary"
    aria-label="Action"
    (click)="create()"
  >
    执行操作
  </button>
</div>

<!-- 集中管理所有条件提示内容的模板 -->
<ng-template #tooltipContentTemplate>
  <ng-container *ngIf="showLOBMessage">请选择业务线 (LOB)</ng-container>
  <ng-container *ngIf="showEndpointsMessage">请选择终端 (Endpoints)</ng-container>
  <ng-container *ngIf="showOtherMessage">这是一个不同的提示信息</ng-container>
  <!-- 默认提示，当上述条件都不满足时显示 -->
  <ng-container *ngIf="!showLOBMessage && !showEndpointsMessage && !showOtherMessage">
    点击按钮以开始操作
  </ng-container>
</ng-template>

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  lob: string | undefined = undefined; // 示例：业务线状态
  endpointsSelected: boolean = false; // 示例：终端选择状态
  anotherConditionMet: boolean = false; // 示例：其他条件

  /**
   * 计算属性：是否显示“请选择业务线”的提示
   * 如果 lob 未定义或为空，则显示
   */
  get showLOBMessage(): boolean {
    return !this.lob || this.lob === undefined || this.lob === '';
  }

  /**
   * 计算属性：是否显示“请选择终端”的提示
   * 在 LOB 已选择但终端未选择时显示
   */
  get showEndpointsMessage(): boolean {
    return !this.showLOBMessage && !this.endpointsSelected;
  }

  /**
   * 计算属性：是否显示“其他信息”的提示
   * 当 anotherConditionMet 为真时显示
   */
  get showOtherMessage(): boolean {
    return this.anotherConditionMet;
  }

  /**
   * 计算属性：按钮是否应该禁用
   * 如果需要显示 LOB 或 Endpoints 提示，则禁用按钮
   */
  shouldDisableButton(): boolean {
    return this.showLOBMessage || this.showEndpointsMessage;
  }

  create(): void {
    console.log('执行操作...');
    // 模拟条件变化
    if (this.showLOBMessage) {
      this.lob = 'Finance'; // 模拟选择 LOB
      console.log('LOB 已选择: Finance');
    } else if (this.showEndpointsMessage) {
      this.endpointsSelected = true; // 模拟选择 Endpoints
      console.log('Endpoints 已选择');
    } else {
      this.anotherConditionMet = !this.anotherConditionMet; // 切换其他条件
      console.log('其他条件切换为:', this.anotherConditionMet);
    }
  }
}