Angular5 - 指令/组件到顶部和左侧的距离

Question

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

export class TestComponent implements AfterViewInit { @ViewChild('canvas') private canvasRef: ElementRef;

此外，我有... component.ts：

$("#desiredCanvasElement").position();

我现在如何计算窗口边框，如下图所示（见红线）？

对于jQuery用户：我正在寻找一种计算document.getElementById("add-form").disabled = true;

的方法

Answer 1

注意Angular Doc：

class ElementRef {
  constructor(nativeElement: any)
  nativeElement: any
}

解决方案：

$(this.canvasRef.nativeElement).position()

Answer 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;
}

这是一个＆＃34;工作＆＃34;例 https://embed.plnkr.co/N3Z8Bi7vrNlCYEfzI4En/