角2：DOMからポップアップの高さを取得

Question

データベースから取得したデータをmousemoveに表示し、マウスの位置に表示する「ポップアップ」があります。それは次のようになります。

<div (mousemove)="onMouseMove($event)></div> 

onMouseMove(event: MouseEvent) { 
    this.xCoord = event.x 
    this.yCoord = event.y 
} 

<div [style.left.px]="xCoord" [style.top.px]="yCoord" class="popup"> 
    ... 
</div> 

ポップアップの寸法は、その内容に応じて、動的であるため、私は適切に配置されるようにポップアップために寸法を取得する必要があります（ターゲットの上と左右中央）。 Angular 2では、マウスイベントのない要素からスタイルプロパティを取得することは可能ですか？理想的には、ポップアップが表示されたときにディメンションが変数に割り当てられます。

あなただけそうのように、DOM要素の幅と高さのプロパティにアクセスするための基本的なJavascriptを使用していないのはなぜ

Answer 1

：

Javascriptを：

getPopupDimentions() { 
    let myElement = getElementById("myPopup"); 
    return { 
     width: myElement.style.width, 
     height: myElement.style.height 
    } 
} 

HTML：

<div [style.left.px]="xCoord" [style.top.px]="yCoord" class="popup" id="myPopup"> 
    ... 
</div> 

もちろん、私が上に掲示したJavascriptは、一度ポップアップhaと呼ぶ必要がありますsが開始されました。

---

あなたはアプローチのような角度より多くを望んでいた場合、私はそうのように、ビューの子を使用することをお勧めします：

Javascriptを：

はあなたが

ViewChild import { Component, ViewChild } from '@angular/core'インポートしていることを確認します

@ViewChild('mypopup') mypopup; 

getPopupDimentions() { 
    return { 
     width: this.mypopup.nativeElement.style.width, 
     height: this.mypopup.nativeElement.style.height 
    } 
} 

HTML：

<div [style.left.px]="xCoord" [style.top.px]="yCoord" class="popup" #mypopup> 
    ... 
</div> 

あなたは角度ビューの子どもについての詳細を知りたい場合は、私がthis question and its answersをチェックアウトをお勧めします。