将省略号指令添加到 Angular 材质选择时添加工具提示答案

【问题标题】：Add Tooltip When Ellipsis Directive to Angular Material Select将省略号指令添加到 Angular 材质选择时添加工具提示
【发布时间】：2021-01-14 05:13:08
【问题描述】：

我在一个 Angular 9 项目中工作，我有一个指令，如果元素被截断（如果元素的文本太长并且溢出以省略号结尾），它将添加一个 matTooltip。

该指令适用于我一直在使用的所有元素，直到我添加了材质选择。我的材质选择中的某些选项名称很长，默认情况下，材质选择会设置最大宽度大小，如果太长，则会用省略号溢出文本。不过，我也希望用户能够通过工具提示查看完整的选项名称。

问题是当我将指令添加到 mat-option 元素时它不起作用。即使被截断，工具提示也永远不会显示。我猜我是否将它添加到错误的元素中，而 mat-option 不是被截断的内容。但我不确定哪个元素是以及如何将我的指令添加到它。

这是一个解决问题的堆栈闪电：https://stackblitz.com/edit/tooltip-if-truncated-directive-issue-with-matselect?file=src/app/app.component.html

这是我的工具提示指令：

@Directive({
  selector: "[matTooltip][appTooltipIfTruncated]"
})
export class TooltipIfTruncatedDirective implements OnInit {
  constructor(private matTooltip: MatTooltip, private elementRef: ElementRef<HTMLElement>) {}

  public ngOnInit(): void {
    // Wait for DOM update
    setTimeout(() => {
      console.log("tooltip dir", this.elementRef.nativeElement);
      const element = this.elementRef.nativeElement;
      console.log(
        "tooltip dir. scroll: ",
        element.scrollWidth,
        "\t client: ",
        element.clientWidth,
        "result: ",
        element.scrollWidth <= element.clientWidth
      );
      this.matTooltip.disabled = element.scrollWidth <= element.clientWidth;
    });
  }
}

这是我如何将它与大多数元素一起使用（并且有效）：

<p [matTooltip]="'test'" appTooltipIfTruncated>This is a test.</p>

这是我如何将它添加到材料选择的选项（不起作用）：

<mat-select [formControl]="selectedCountryControl" placeholder="Country">
  <mat-option *ngFor="let opt of opts" [value]="opt" [matTooltip]="'test'" appTooltipIfTruncated>{{opt}}</mat-option>
</mat-select>

我也不确定是否有另一种方法可以通过材料选择/选项（没有指令）来做到这一点，我愿意接受任何可以在文本太长时提供工具提示功能的方法截断为我的材料选项。

感谢您提供的任何帮助。

【问题讨论】：

标签： angular angular-material angular9

【解决方案1】：

在我的案例中，我使用的是 ngbTooltip。你可以参考这个：这是 HTML 代码

<tr *ngFor="let parameter of params">
<td placement="bottom" tooltipClass="paramTooltip" container="body"  [ngbTooltip]="parameter.parameterCaption">{{parameter.parameterCaptionDisplay}}</td>
</tr>

后端在这里

for(const param of params){
if ( param.parameterCaption.length > 30) {
      param.parameterCaptionDisplay =  param.parameterCaption.substring(0, 27) + '...';
    }else{
      param.parameterCaptionDisplay =  param.parameterCaption;
    }
}

这也是您可以自定义材料选项输入的方式。

【讨论】：

【解决方案2】：

工具提示没有显示，因为 mat-option 实际上没有接收焦点，但它是使用 aria-activedescendant 模拟的焦点。这个问题是在 github(LINK) 中提出的，看起来他们不会改变这种行为。

【讨论】：

【解决方案3】：

您可以使用一些额外的 css 使 matTooltip 在 mat-option 上工作。

这将使焦点在自定义元素mat-option 上，工具栏将显示出来。

::ng-deep{
    mat-option {
        display: inline-block;
        width: 100%;
    }
}

【讨论】：