如何在指令和组件中获取元素的 width/height？

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"> 元素的 width/height。我已多次阅读文档，但仍然找不到解决此问题的方法。有人知道吗？非常感谢！

Answer 1

您可以使用 ElementRef，如下所示，

演示：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的安全风险，像这样，还有none。如果您要使用 ElementRef 修改 DOM，那么会有风险。但在这里你只是 getting DOM 元素所以没有风险。使用 ElementRef 的一个有风险的例子是：this.myIdentifier.nativeElement.onclick = someFunctionDefinedBySomeUser;。像这样 Angular 没有机会使用它的清理机制，因为 someFunctionDefinedBySomeUser 直接插入到 DOM，跳过 Angular 消毒。

Answer 3

@ViewChild 并非对所有人都有效——至少对我而言是这样。我正在使用 Angular 9. 起作用的是 使用@ViewChildren:

@ViewChildren('myIdentifier')
myIdentifier: QueryList<ElementRef>;

ngAfterViewInit() {
  this.myIdentifier.changes.subscribe((identifiers) => {
    console.log("OFFSET WIDTH", identifiers.first.nativeElement.offsetWidth);
  });
}

如何在指令和组件中获取元素的 width/height？

How to get element's width/height within directives and component?

angular-directive

angular-components

angular