如何在指令和组件中获取元素的宽度/高度？

Question

@Component({
    selector: '.donation',
    template: `
    <figure id="donation" move>
        <img src="image/qrcode.png"/>
        <figcaption>
        Buy me a cup of coffee.
        </figcaption>
    </figure>
    `
})
export class DonationComponent{}

@Directive({
    selector: '[move]'
})
export class MoveDirective{}

嘿，我想在MoveDirective 和DonationComponent 中获取<figure id="donation"> 元素的宽度/高度。我已多次阅读文档，但仍然找不到解决此问题的方法。有人知道吗？非常感谢！

Answer 1

你可以如下图使用ElementRef，

DEMO : https://plnkr.co/edit/XZwXEh9PZEEVJpe0BlYq?p=preview 检查浏览器的控制台。

import { Directive, Input, Output, ElementRef, Renderer } from '@angular/core';

@Directive({
  selector:"[move]",
  host:{
    '(click)':"show()"
  }
})

export class GetEleDirective{
  
  constructor(private el:ElementRef) { }

  show(){
    console.log(this.el.nativeElement);
    
    console.log('height---' + this.el.nativeElement.offsetHeight);  //<<<===here
    console.log('width---' + this.el.nativeElement.offsetWidth);    //<<<===here
  }
}

您可以在任何需要的地方在组件本身中使用它。

Answer 2

要获得比 micronyks 答案更多的灵活性，您可以这样做：

1. 在您的模板中，将#myIdentifier 添加到要从中获取宽度的元素。示例：

<p #myIdentifier>
  my-component works!
</p>

2. 在您的控制器中，您可以将其与@ViewChild('myIdentifier') 一起使用来获取宽度：

import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.scss']
})
export class MyComponentComponent implements AfterViewInit {

  constructor() { }

  ngAfterViewInit() {
    console.log(this.myIdentifier.nativeElement.offsetWidth);
  }

  @ViewChild('myIdentifier')
  myIdentifier: ElementRef;

}

---

安全

关于ElementRef的安全风险，像这样，没有。如果您使用 ElementRef 修改 DOM，将会有风险。但是在这里您只是获取 DOM 元素，因此没有风险。使用ElementRef 的一个危险示例是：this.myIdentifier.nativeElement.onclick = someFunctionDefinedBySomeUser;。像这样，Angular 没有机会使用其清理机制，因为 someFunctionDefinedBySomeUser 被直接插入到 DOM 中，跳过 Angular 清理。