在省略号指令 Angular Material Select 时添加工具提示

Question

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

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

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

这是一个解决问题的 stackblitz：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>

下面是我如何将它添加到 material select 的选项（不起作用）：

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

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

感谢您提供的任何帮助。

Answer 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;
    }
}

这也是您可以自定义输入 material 选项的方法。

Answer 2

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

Answer 3

您可以使用一些额外的 css.

让 matTooltip 在 mat-option 上工作

这会启用对自定义元素的关注 mat-option 并且将显示工具栏。

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

在省略号指令 Angular Material Select 时添加工具提示

Add Tooltip When Ellipsis Directive to Angular Material Select

angular-material

angular

angular9