mat工具提示无法在翻译管道中正常工作 |角度 11

Question

我偶然发现了一个matTooltip使用问题。让我们想象一下我有这样的东西：

<div matTooltip="{{ 'statuses.' + status | translate }}"
[matTooltipDisabled]="hideTooltip"
(mouseenter)="isTruncated($event)">
<span>{{ 'statuses.' + status | translate }}</span> <!-- translation works properly -->
</div>

其中status取自模板。这就是分配/计算hideTooltip的方式：

isTruncated(event: any) {
this.hideTooltip = this.helpers.isNotTruncated(event);  
}
---
// inside helpersService
isNotTruncated(event: any): boolean {
if (event.target) {
if (event.target.scrollWidth && event.target.offsetWidth) {
return !(event.target.scrollWidth > event.target.offsetWidth);
} else if (event.target.scrollWidth === 0) {
return true;
}
}
}

所以，实际的结果是：当值是英文(默认语言(并且被截断时，鼠标悬停时会显示matTooltip。但当改变语言时，问题就出现了。当值处于抛光状态时(只是一个例子，它不依赖于具体的语言(，matTooltip总是隐藏的，scrollWidth总是等于offsetWidth。有人知道解决办法吗？还是内部材料/翻译管道问题？

Answer 1

发布这个答案，以防有人觉得有用。这个问题与翻译短语的长度有关。当值很小时，它没有被正确地截断。所以解决方案很简单：

template
--------
<div matTooltip="{{ 'statuses.' + status | translate }}"
[matTooltipDisabled]="hideTooltip"
class="status-truncated"
(mouseenter)="isTruncated($event)">
<span>{{ 'statuses.' + status | translate }}</span>
</div>
------
------
styles
------
.status-truncated {
letter-spacing: .2px;
}