如何以角度9发送（div.width）

Posted 2021-04-30

我想将页面大小发送到TypeScript文件并在其中使用它。我该如何发送？

app.component.html：

<div #divLeft >
  <button (click)="test(divLeft.width)">click</button>
</div>

app.component.ts：

test(e){
  console.log(e);
}

控制台：未定义

答案

您应该传递$event以在打字稿函数中获取事件，然后可以访问它的srcElement，target等，以便您控制它的HTML和DOM Node] >

您可以得到offsetWidth或clientWidth

HTML

<div #divLeft>
  <button (click)="test($event)">Click Me</button>
</div>
打字稿

test(e){
  console.log(event.target.offsetWidth);
}

您可以从此link中引用它们之间的区别

或

您可以使用ViewChild获取其引用并控制DOM

请参阅this post了解更多说明

更新

我刚刚意识到srcElement已被弃用，但我始终建议如下使用ViewChild

打字稿代码

@ViewChild("leftDiv", { static: true }) leftDiv: ElementRef;

test() {
   console.log(this.leftDiv.nativeElement.clientWidth)
  }
HTML

<div #leftDiv>
  <button (click)="test()">Click Me</button>
</div>
stakblitz