web-dev-qa-db-ja.com

要素の高さを取得する

コンポーネントテンプレートから要素プロパティを取得できるかどうか興味がありました。だから私はクラスで簡単な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とスタイルを確認したところ、2つのCSS要素が原因であることがわかりました。 1つは_.view-main-screen[_ngcontent-aer-1]{}_で、2つ目は_element{}_です。 _.view-main-screen_にはいくつかのスタイルがありますが、要素は空です。 setStyle()でスタイルを追加すると、_element{}_に表示されます。何故ですか？ Angular2を使用して要素のプロパティを取得するにはどうすればよいですか？

propertiestypescriptangular
21
Arth

正しい方法は@ViewChild()デコレーターを使用することです：

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;
      }
}

これでうまくいくはずですが、明らかにコンポーネントデコレータを追加する必要があります。

47
Jon Catmull

update2

constructor(private elementRef:ElementRef) {}

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

nativeElementに直接アクセスすることはお勧めしませんが、現在のAngularは私の知る限り他の方法を提供していません。

update

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 のコメントも参照してください。

14
Günter Zöchbauer
<div *ngFor="let item of items" (click)="itemClick($event.currentTarget)"></div>

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