Получение высоты элемента

Мне было любопытно, могу ли я получить свойства элемента из шаблона компонента. Поэтому я сделал простой div с классом, и я сделал этот класс:

export class viewApp{

  elementView: any;
  viewHeight: number;
  myDOM: Object;

  constructor() {
    this.myDOM = new BrowserDomAdapter();
  }

  clickMe(){
    this.elementView = this.myDOM.query('div.view-main-screen');
    this.viewHeight = this.myDOM.getStyle(this.elementView, 'height');
  }
}

getStyle(), query() взяты из BrowserDomAdapter. Моя проблема в том, что когда я пытаюсь получить высоту, это null, но когда я устанавливаю некоторую высоту на setStyle(), а затем получаю ее с помощью getStyle(), она возвращает правильное значение. После проверки DOM и стилей в браузере я обнаружил, что это связано с двумя элементами CSS. Один из них: .view-main-screen[_ngcontent-aer-1]{}, а второй - element{}. .view-main-screen имеет несколько стилей, но элемент пуст. Когда я добавляю стили setStyle(), он появляется в element{}. Почему это? Как получить свойства элемента с помощью Angular2?

Ответы

Ответ 1

Правильный способ - использовать @ViewChild() decorator:

https://angular.io/docs/ts/latest/api/core/index/ViewChild-decorator.html

Шаблон:

<div class="view-main-screen" #mainScreen></div>

компонент:

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

export class viewApp{

      @ViewChild('mainScreen') elementView: ElementRef;
      viewHeight: number;

      constructor() {
      }

      clickMe(){
        this.viewHeight = this.elementView.nativeElement.offsetHeight;
      }
}

Это должно сделать это, но, очевидно, вам нужно добавить декоратор Component.

Ответ 2

Update2

constructor(private elementRef:ElementRef) {}

someMethod() {
   console.log(this.elementRef.nativeElement.offsetHeight);
}

Доступ к nativeElement напрямую не рекомендуется, но текущий Angular не предоставляет других способов, насколько мне известно.

Обновление

https://github.com/angular/angular/pull/8452#issuecomment-220460761

mhevery прокомментировал 12 дней назад Мы решили удалить службу Ruler, и поэтому она не является частью публичного API.

оригинальный

Насколько я знаю, класс Ruler должен обеспечивать эту функциональность https://github.com/angular/angular/blob/master/modules/angular2/src/platform/browser/ruler.ts, если этого недостаточно, вам, вероятно, нужно получить доступ к elementRef.nativeElement и использовать прямой доступ DOM и функции, предоставляемые элементами.

new Ruler(DOM).measure(this.elRef).then((rect: any) => {
});

Служба правил безопасна в WebWorker. См. Также комментарии https://github.com/angular/angular/issues/6515#issuecomment-173353649

Ответ 3

<div *ngFor="let item of items" (click)="itemClick($event.currentTarget)"></div>

itemClick(dom){
  var height=dom.clientHeight;
  // ...
}