как отправить (div.width) в angular 9

Question

Я хочу отправить размер страницы в файл TypeScript и использовать его там. Как его отправить?

app.component. html:

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

app.component.ts:

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

консоль: не определено

Answer 1

Вы должны передать $event, чтобы получить событие в вашей функции машинописи, а затем вы можете получить доступ к его srcElement, target, et c, который дает вам контроль над HTML и DOM Node

Вы можете получить его offsetWidth или clientWidth

HTML

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

машинопись

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

Вы можете сослаться на разницу между ними по этой ссылке

или

, которую вы можете использовать ViewChild, чтобы получить ее ссылку и принять контроль над DOM

см. этот пост для более подробного объяснения

Обновление

Я только что понял, что 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