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

胡亚雄 :

@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中获取元素的宽度/高度,我读了几次文档,但仍然找不到解决这个问题的方法。有人知道这一点请帮帮我,非常感谢!

micronyks:

您可以如下所示使用ElementRef

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

import { Directive,Input,Outpu,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
  }
}

您可以在需要时在组件本身中使用它的方式相同。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在OpenCV中获取图像的宽度和高度?

如何在Android中获取弹出菜单的高度和宽度?

如何在iOS中获取屏幕的宽度和高度?

如何在Android中获取显示图像的宽度和高度?

如何在selection:created事件中获取单个对象的宽度,高度,左侧和顶部?

如何在Webview中获取缩放视口的宽度和高度?

如何在angularjs中获取元素的高度

如何在Angular 2中获取组件以检测其自身的高度和宽度?

如何在WebRTC中获取远程视频的宽度和高度

如何在网络工作者中获取图像的宽度和高度?

角度-如何获取元素的宽度和高度

如何在Vue组件内的窗口滚动中获取固定元素的滚动高度?

如何在SwiftUI中获取视图或屏幕的高度和宽度

角获取组件的高度和宽度

如何在python glfw中获取监视器的宽度和高度

如何在Photoshop中获取元素的宽度/高度?

转换后获取元素的高度和宽度

如何在CodenameOne中更改组件的大小(宽度和高度)

如何在WPF中根据窗口的宽度和高度调整控件的宽度和高度

如何在Windows Phone 8.1中获取屏幕分辨率(宽度和高度)?

如何在引导程序中获取窗口的高度和宽度

如何在jQuery中获取图像高度宽度

插入后如何在自定义ImageView中获取位图的宽度和高度

如何在 Javascript 上测量旋转元素的宽度和高度?

如何在 Angular 2、TypeScript 中获取视频的高度和宽度

如何获取SVG折线元素的高度和宽度?

如何在每次绘制到 UI 之前获取 ImageView 的高度和宽度(在 Fragment 中)

如何在 Python 的 Tkinter 模块中获取单元格的当前高度和宽度

旋转后如何获取元素的真实宽度和高度?