Angular中基于条件动态显示多内容模板的最佳实践

<!-- 初始尝试：为不同条件使用不同的 ng-template -->
<div *ngIf="!assessmentDetailsObj" placement="top-right" [mtTooltip]="(!lob || lob === undefined) ? disabledLOBContent : ''">
    <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>

<!-- 尝试添加第二个条件，导致绑定表达式复杂 -->
<!-- [mtTooltip]="isTrueSet ? refVar : ''" -->
<!-- <ng-template #refVar>请选择终端</ng-template> -->

<!-- 组件模板文件 (e.g., my-component.html) -->
<div *ngIf="!assessmentDetailsObj" placement="top-right" [mtTooltip]="dynamicTooltipContent">
    <button
        *ngIf="!assessmentDetailsObj"
        [disabled]="shouldDisableButton()"
        class="btn btn-primary"
        aria-label="Accept"
        (click)="create()"
    >
        创建
    </button>
</div>

<!-- 集中管理所有动态工具提示内容的 ng-template -->
<ng-template #dynamicTooltipContent>
    <ng-container *ngIf="!lob || lob === undefined">请选择LOB</ng-container>
    <ng-container *ngIf="isEndpointSelectionRequired && !selectedEndpoints.length">请选择终端</ng-container>
    <ng-container *ngIf="someOtherCondition">其他自定义消息</ng-container>
    <!-- 也可以添加一个默认消息，在所有特定条件都不满足时显示 -->
    <ng-container *ngIf="!shouldDisableButton() && !someOtherCondition">按钮已启用</ng-container>
</ng-template>

// 组件 TypeScript 文件 (e.g., my-component.ts)
import { Component } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.html',
  styleUrls: ['./my-component.css']
})
export class MyComponent {
  assessmentDetailsObj: any = null; // 假设这是一个对象，初始为null
  lob: string | undefined = undefined; // 业务线 (Line Of Business)
  isEndpointSelectionRequired: boolean = true; // 假设需要选择终端
  selectedEndpoints: any[] = []; // 假设已选择的终端列表
  someOtherCondition: boolean = false; // 其他自定义条件

  /**
   * 判断按钮是否应该被禁用
   * @returns {boolean} 如果按钮应该禁用则返回 true
   */
  shouldDisableButton(): boolean {
    const isLOBMissing = !this.lob || this.lob === undefined;
    const areEndpointsMissing = this.isEndpointSelectionRequired && !this.selectedEndpoints.length;
    return isLOBMissing || areEndpointsMissing;
  }

  create(): void {
    console.log('执行创建操作');
    // 在此处添加创建逻辑
  }
}