Question

我正在使用Angular 6。我有一个固定宽度的元素，里面有一个字符串。我已经设置了CSS，因此如果字符串溢出，则会显示3个点（省略号）。现在，在发生溢出的情况下，我想设置title属性，以便用户只需将其悬停即可查看完整的字符串。

我正在寻找侵入性较小/最佳/优雅/正确的方法来做。

到目前为止，我已经尝试了2种方法：

方法1（PIPE）

.truncate {
    width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@Pipe({
    name: "titlePipe"
})
export class TitlePipe implements PipeTransform {
    transform(title: string, element: HTMLElement) {
        return element.scrollWidth > element.offsetWidth ? title : "";
    }
}

<div #pname class="truncate" [title]="photoItem.Name | titlePipe:pname">{{photoItem.Name}}</div>

不幸的是，此方法不起作用，因为在元素尚未完全加载时管道正在运行。

方法2

.truncate {
    width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

<div #pname class="truncate" [title]="pname.scrollWidth > pname.offsetWidth ? photoItem.Name : ''">{{photoItem.Name}}</div>

此方法有效，但引发错误：

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'title: '. Current value: 'title: dummy-2000x2000-FairyLights.jpg'.

什么是最好的且侵入性较小的方法？

Answer 1

您可以使用ChangeDetectorRef服务摆脱表达式具有Changed错误的问题并使用detectChanges方法强制更改检测

这可以工作

import{ChangeDetectorRef} from '@angular/core';

constructor(private cd: ChangeDetectorRef) {
    }

    ngAfterViewInit() {
        this.cd.detectChanges();
    }

如果内容溢出，则设置标题属性

1 个答案: