如何在Angular2中获取（DOM）元素的宽度 [英] How to get width of (DOM) Element in Angular2

问题描述

有一些类似的线程，但我无法找到合适的答案
满足我的需求。所以应该严格避免直接DOM访问
in angular2我只是想知道最新的做法是什么。

我不想实现的是根据当前宽度调整元素大小。

workitemresize.component.ts

< pre class =lang-js prettyprint-override> 从'@ angular / core'导入{Directive，ElementRef，HostListener，Renderer，Input};

@Directive（{
selector：'[workItemResize]'
}）

导出类WorkItemResizeDirective实现ngAfterViewInit {

private el：HTMLElement;
私人渲染器：渲染器;

构造函数（el：ElementRef，public renderer：Renderer）
{
this.el = el.nativeElement;
this.renderer = renderer;
}


@HostListener（'window：resize'，['$ event.target']）
onResize（）
{
this.resizeWorks（）;
}

ngAfterViewInit（）{
this.resizeWorks（）;
}

private resizeWorks（）：void {
this.renderer.setElementStyle（this.el，'height'，this.el.width）; //< - 不起作用我知道this.el.width不存在但只是为了演示目的
this.renderer.setElementStyle（this.el，'height'，'500'）; //< - works
}

}


projects.template.html

 < div class =posts row> 
< div class =work-item col-xs-12 col-sm-6 col-no-paddingworkItemResize * ngFor =let post of posts> 
 
<！ - 显示一些奇特的图像 - > 
< div class =img[ngStyle] ={'background-image'：'url（'+ post.better_featured_image.source_url +'）'}>< / div> 
 
< / div> 
< / div> 
  

相关：
https://github.com/angular/angular/issues/6515

解决方案

我不知道如何在不访问 nativeElement 的情况下从主机元素获取宽度，但设置可以像：

  @HostListener（'window：resize'，['$ event.target']）
 onResize（）{
 this。 resizeWorks（）; 
} 
 
 @HostBinding（'style.height.px'）
 elHeight：number; 
 
 private resizeWorks（）：void {
 this.elHeight = this.el.nativeElement.width; 
} 
  

如果您可以在组件模板中添加元素，例如

 < div style =width：100％; #div（window：resize）=elHeight = div.getBoundingClientRect（）> 
<！ - 这里的模板 - > 
< / div> 
  

然后这可以在没有直接DOM访问的情况下工作（但不能在init之后）。

there a some similiar threads but I couldn't find a suitable answer for my needs. So that direct DOM access should be strictly avoided in angular2 I'm just wondering whats best practice for this.

What I wan't to achieve is a resize of a element based on the current width.

workitemresize.component.ts

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

@Directive({
  selector: '[workItemResize]'
})

export class WorkItemResizeDirective implements ngAfterViewInit {

  private el: HTMLElement;
  private renderer: Renderer;

  constructor(el: ElementRef, public renderer: Renderer)
  { 
    this.el = el.nativeElement; 
    this.renderer = renderer;
  }  


  @HostListener('window:resize', ['$event.target']) 
  onResize() 
  { 
    this.resizeWorks();
  }

  ngAfterViewInit() {
    this.resizeWorks();
  }

  private resizeWorks(): void {
    this.renderer.setElementStyle(this.el, 'height', this.el.width); // <-- doesn't work I kow that this.el.width doesn't exist but just for demonstration purpose
    this.renderer.setElementStyle(this.el, 'height', '500'); // <-- works
  }

}

projects.template.html

<div class="posts row">
        <div class="work-item col-xs-12 col-sm-6 col-no-padding"  workItemResize *ngFor="let post of posts">

                <!-- show some fancy image -->
                <div class="img"  [ngStyle]="{'background-image':'url('+post.better_featured_image.source_url+')'}"></div>

        </div>
</div>

Related: https://github.com/angular/angular/issues/6515

解决方案

I don't know a way to get the width from the host element without accessing nativeElement but setting could be done like:

@HostListener('window:resize', ['$event.target']) 
onResize() { 
  this.resizeWorks();
}

@HostBinding('style.height.px')
elHeight:number;

private resizeWorks(): void {
  this.elHeight = this.el.nativeElement.width;
}

If you can add an element inside your components template like

<div style="width: 100%;" #div (window:resize)="elHeight = div.getBoundingClientRect()">
  <!-- your template here -->
</div>

then this would work without direct DOM access at all (but not after init).

这篇关于如何在Angular2中获取（DOM）元素的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！