Angular：如何基于多条件实现多matToolTip并控制启用状态？

完全可以通过Angular Material的matTooltip组件实现你的需求，核心是通过逻辑判断生成组合提示文本，并动态控制tooltip的启用状态：

1. 生成多条件组合的提示文本 #

在组件的getScorerTooltipText方法中，根据条件A、B、C的满足情况，拼接对应的提示片段：

getScorerTooltipText(scorer: any): string {
  const tipSegments: string[] = [];
  
  // 替换为实际业务逻辑判断条件A、B、C
  if (scorer.meetsConditionA) {
    tipSegments.push('条件A对应的提示内容');
  }
  if (scorer.meetsConditionB) {
    tipSegments.push('条件B对应的提示内容');
  }
  if (scorer.meetsConditionC) {
    tipSegments.push('条件C对应的提示内容');
  }
  
  // 用&拼接组合后的提示，可根据需求调整分隔符
  return tipSegments.join('&');
}

2. 动态控制tooltip的启用状态 #

不需要全局的isTooltipDisabled变量，直接根据当前scorer的提示文本是否为空来控制matTooltipDisabled：

• 如果getScorerTooltipText返回空字符串/空白，就禁用tooltip
• 否则启用tooltip

修改后的完整模板代码 #

<ng-container matColumnDef="totalRuns">
    <th mat-header-cell *matHeaderCellDef>Runs</th>
    <td mat-cell *matCellDef="let scorer"
        matTooltipPosition="right"
        [matTooltip]="getScorerTooltipText(scorer)"
        [matTooltipDisabled]="!getScorerTooltipText(scorer) || getScorerTooltipText(scorer).trim() === ''"
        [class.alert-red]="!!getScorerTooltipText(scorer)"> 
        {{scorer.runTotals}}
    </td>
    <td mat-footer-cell *matFooterCellDef> {{scoreTotals}} </td>
</ng-container>

性能优化建议（可选） #

如果表格数据量较大，多次调用getScorerTooltipText可能带来性能损耗，建议提前计算每个scorer的提示文本和禁用状态：

// 假设scorers是你的数据源数组
this.scorers.forEach(scorer => {
  scorer.tooltipText = this.getScorerTooltipText(scorer);
  scorer.isTooltipDisabled = !scorer.tooltipText || scorer.tooltipText.trim() === '';
});

之后模板可以简化为：

[matTooltip]="scorer.tooltipText"
[matTooltipDisabled]="scorer.isTooltipDisabled"
[class.alert-red]="!scorer.isTooltipDisabled"

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