如何知道Angular 6中字符串的像素长度？

Question

我需要显示一个矩形，其中包含文本，这些文本均应位于文本的某些特定单词上方。要知道要显示的矩形的大小，我需要知道矩形上方的单词的长度（以像素为单位）。

我知道有可能了解length of a string in JavaScript/JQuery，但我想知道是否有可能在Angular 6中本地进行。

Answer 1

使用ViewChild（ren）装饰器可以做到这一点。

查看孩子：

在html中标记您的元素：

<span #widthTarget>my text</span>

在控制器中：

@ViewChild('widthTarget')
widthTarget: ElementRef;

ngAfterViewInit() { //view children must be accessed at this hook or later
  console.log(this.widthTarget.nativeElement.width);
}

对于多个元素，请使用ViewChildren装饰器及其关联功能。

您也可以使用某种指令来实现这一点，但这取决于您的实际用例。