Angular中能否通过函数绑定mtTooltip实现多条件下的不同提示内容

当然可以！通过函数绑定[mtTooltip]来处理多条件判断是完全可行的，而且这种方式能把分散在模板里的逻辑集中到组件类中，不仅让模板代码更简洁，后期维护或添加新条件也会更方便。

下面结合你的代码场景，给你具体的实现步骤：

1. 在组件类中定义判断函数并获取模板引用 #

首先，你需要通过@ViewChild获取两个提示模板的引用，然后写一个函数来根据条件返回对应的模板（或者空值）：

import { Component, ViewChild, TemplateRef } from '@angular/core';

@Component({
  // 这里是你的组件元数据，比如selector、templateUrl等
})
export class YourComponent {
  // 获取模板引用
  @ViewChild('disabledLOBContent') disabledLOBContent!: TemplateRef<any>;
  @ViewChild('refVar') refVar!: TemplateRef<any>;

  // 你的现有变量
  lob: any;
  isTrueSet: boolean;
  assessmentDetailsObj: any;

  // 定义tooltip内容判断函数
  getTooltipContent(): TemplateRef<any> | '' {
    // 先判断LOB未选择的情况
    if (!this.lob || this.lob === undefined) {
      return this.disabledLOBContent;
    }
    // 再判断Endpoints未选择的情况
    if (this.isTrueSet) {
      return this.refVar;
    }
    // 没有符合的条件，返回空不显示tooltip
    return '';
  }

  // 你的create方法
  create() {
    // ... 原有逻辑
  }
}

2. 修改模板中的绑定 #

把原来的[mtTooltip]直接绑定到这个函数上，同时记得更新按钮的disabled条件（如果新条件下按钮也需要禁用的话）：

<div *ngIf="!assessmentDetailsObj" placement="top-right" [mtTooltip]="getTooltipContent()">
  <button
    *ngIf="!assessmentDetailsObj"
    [disabled]="(!lob || lob === undefined) || isTrueSet"
    class="btn btn-primary"
    aria-label="Accept"
    (click)="create()"
  >
    Create
  </button>
</div>

<ng-template #disabledLOBContent>Please Select LOB</ng-template>
<ng-template #refVar>Please select Endpoints</ng-template>

可选优化：直接返回文本（无需模板） #

如果你的mtTooltip支持直接绑定字符串文本，也可以简化逻辑，不用定义ng-template，直接让函数返回提示文本：

getTooltipMessage(): string {
  if (!this.lob || this.lob === undefined) {
    return 'Please Select LOB';
  }
  if (this.isTrueSet) {
    return 'Please select Endpoints';
  }
  return '';
}

然后模板绑定改成：

[mtTooltip]="getTooltipMessage()"

小提示 #

如果后续需要添加更多条件，建议把判断逻辑整理得更清晰，比如用对象映射或者switch语句，避免嵌套过多的if-else，让代码更易读：

getTooltipContent(): TemplateRef<any> | '' {
  // 把条件统一管理
  const conditions = {
    lobUnselected: !this.lob || this.lob === undefined,
    endpointsUnselected: this.isTrueSet
  };

  if (conditions.lobUnselected) {
    return this.disabledLOBContent;
  } else if (conditions.endpointsUnselected) {
    return this.refVar;
  }
  return '';
}

备注：内容来源于stack exchange，提问作者Kiara