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

问题描述

有一些类似的主题，但我找不到合适的答案为了我的需要.因此应严格避免直接访问 DOM在 angular2 中，我只是想知道这方面的最佳做法是什么.

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

workitemresize.component.ts

import { Directive, ElementRef, HostListener, Renderer, Input } from '@angular/core';@指示({选择器:'[workItemResize]'})导出类 WorkItemResizeDirective 实现 ngAfterViewInit {私人 el: HTMLElement;私有渲染器:渲染器；构造函数(el:ElementRef，公共渲染器:渲染器){this.el = el.nativeElement;this.renderer = 渲染器；}@HostListener('window:resize', ['$event.target'])调整大小(){this.resizeWorks();}ngAfterViewInit() {this.resizeWorks();}私有resizeWorks():无效{this.renderer.setElementStyle(this.el, 'height', this.el.width);//<-- 不起作用 我知道 this.el.width 不存在，只是为了演示目的this.renderer.setElementStyle(this.el, 'height', '500');//<-- 有效}}

projects.template.html

<div class="work-item col-xs-12 col-sm-6 col-no-padding" workItemResize *ngFor="让帖子发帖"><!-- 展示一些精美的图片--><div class="img" [ngStyle]="{'background-image':'url('+post.better_featured_image.source_url+')'}"></div>

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

解决方案

我不知道有什么方法可以在不访问 nativeElement 的情况下从宿主元素获取宽度，但可以通过以下方式进行设置:

@HostListener('window:resize', ['$event.target'])onResize() {this.resizeWorks();}@HostBinding('style.height.px')elHeight:数字；私有resizeWorks():无效{this.elHeight = this.el.nativeElement.width;}

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

<!-- 您的模板在这里-->

那么这将在没有直接访问 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屋！