Question

我正在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>

我也不确定是否有另一种方法可以使用材料选择/选项（没有指令），我乐于接受任何能够提供当文本太长且文本太短时具有工具提示功能的方法被截断为我的材料选项。

感谢您提供的任何帮助。

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

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

Answer 2

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

Answer 3

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

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

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

当椭圆指令选择角材料时添加工具提示

3 个答案: