Css 角度5-获取指令/组件到顶部和左侧的距离

我有一个具有以下模板（…component.html）的组件：

此外，我在…component.ts中：

export class TestComponent implements AfterViewInit {

  @ViewChild('canvas')
  private canvasRef: ElementRef;

我现在如何计算到下图中标记的窗口边框的距离（请参见红线）

对于jQuery用户：我正在寻找一种计算

$（“#desiredCanvasElement”）.position（）的方法
注意：

解决方案：

$（this.canvasRef.nativeElement）.position（）
注意：

解决方案：

$（this.canvasRef.nativeElement）.position（）
我认为这是一个无jquery的解决方案

如果我正确理解了你的问题，你不能使用客户身高吗

@ViewChild('canvasContainer')
private canvasContainerRef: ElementRef;

@ViewChild('canvas')
private canvasRef: ElementRef;

verticalBorderHeight: number = 0;
horizontalBorderHeight: number = 0;

ngAfterViewInit() { //Or whatever lifecycle event you want to use to check the heights 
    this.verticalBorderHeight = (this.canvasContainerRef.nativeElement.clientHeight - this.canvasRef.nativeElement.clientHeight) / 2;
    this.horizontalBorderHeight = (this.canvasContainerRef.nativeElement.clientWidth - this.canvasRef.nativeElement.clientWidth) / 2;
}

这里有一个“有效”的例子
我认为这是一个没有jquery的解决方案

如果我正确理解了你的问题，你不能使用客户身高吗

@ViewChild('canvasContainer')
private canvasContainerRef: ElementRef;

@ViewChild('canvas')
private canvasRef: ElementRef;

verticalBorderHeight: number = 0;
horizontalBorderHeight: number = 0;

ngAfterViewInit() { //Or whatever lifecycle event you want to use to check the heights 
    this.verticalBorderHeight = (this.canvasContainerRef.nativeElement.clientHeight - this.canvasRef.nativeElement.clientHeight) / 2;
    this.horizontalBorderHeight = (this.canvasContainerRef.nativeElement.clientWidth - this.canvasRef.nativeElement.clientWidth) / 2;
}

这里有一个“有效”的例子
@mr.void使用jQuery对我来说很好。只是不知道如何将
canvasRef
属性与jQueryjust do$（canvasRef）一起使用，请确保jquery已加载Just
$（canvasRef）
导致错误，
$（this.canvasRef.nativeElement）
有效@void先生使用jQuery对我来说很好。只是不知道如何将
canvasRef
属性与jQueryjust do$（canvasRef）一起使用，请确保jquery已加载Just
$（canvasRef）
导致错误，
$（this.canvasRef.nativeElement）
有效！这不起作用，因为填充是元素本身的一部分（当您在小提琴中使用它时）。如果您将填充改为边距（这是我的用例的一个示例），您的解决方案将不起作用。这很公平，但同样的方法应该起作用，不是吗？这不起作用，因为填充是元素本身的一部分（当您在小提琴中使用它时）。如果你把padding改为margin（这是我的用例的一个例子），你的解决方案就不起作用了。这很公平，但同样的方法也应该起作用，不是吗？