Question

我有一个外部Angular组件库提供的组件，它是我工作的公司的私有开源项目。组件将其内容从Observable注入其中，并且此数据在初始渲染时不可用。有问题的组件是数据表单元格，是较大数据表的一部分，与Material data table非常相似。

其中一个单元格有一个长字符串，根据从API返回的数据，可能会从容器中溢出。在这种情况下，我需要通过砍掉中间部分并用'...'替换它来缩短字符串。字符串是文件路径，例如'C：\ really \ really \ really \ really \ really \ long \ path \ to \ file.txt'。说溢出是从'\ path \ to \ file.txt'部分隐藏的，我希望中间像这样切碎：'C：\ really \ really ... \ long \ path \ to \ file.txt' 。这类似于macOS在Finder中处理长文件路径的方式。我可以使用Pipe来做到这一点，但是我不确定如何获得组件的宽度。我尝试过使用ViewChild，如下所示：

@ViewChild('path') public path: ElementRef;

但是，当我查看path.nativeElement对象中的测量属性时，它们都是0 - 例如：

scrollHeight: 0
scrollLeft: 0
scrollTop: 0
scrollWidth: 0

我认为这是因为数据在加载后被注入表中。我已经尝试查看path中的ngAfterViewInit变量，它正在获取正确的组件，但innerHTML，text，content属性都是空的。我如何获得此变量的最新版本？

或者，如果您对如何实现这一目标有任何其他建议，那将是非常好的。谢谢。

编辑：一些更新。我现在有两个选择：我可以在HTML中使用Pipe，并将路径ElementRef发送到管道，如下所示：

<div #path>{{ value | truncate: path }}</div>

管道代码如下所示：

@Pipe({ name: 'truncate' })
export class TruncatePipe implements PipeTransform {

  public transform(value: string, element: any): string {
    const { scrollWidth, clientWidth } = element;
    // computation to figure out what the value of the new string should be
    return value;
  }

}

该元素具有未截断的值，但scrollWidth和clientWidth相等，当容器的值太长时（这会溢出），这是不正确的; scrollWidth应该比clientWidth长。这意味着我无法计算应该截断多少个字符，因为管道不知道它溢出了多远。我认为这两个变量具有相同值的原因是数据尚未被注入，因此元素（div，所以块元素）占据了它的容器的宽度。如果我之后检查元素，我可以看到scrollWidth大于clientWidth。

我尝试过的另一种方法是在我的组件类中使用代理函数，然后从管道中返回值，如下所示：

public truncatePath(value: string, element: any) {
  return new TruncatePipe().transform(value, element);
}

和HTML：

<div #path>{{ truncatePath(value, path) }}</div>

这有效（clientWidth和scrollWidth不同），但它反复运行该函数，这显然会影响应用程序的性能。

编辑2：如果我将管道代码放在setTimeout中，则clientWidth是正确的值并且字符串被截断，但是因为它在setTimeout中不会呈现该字符串。

在数据注入后从组件中获取ElementRef.nativeElement width属性

0 个答案: