Otrzymywanie wysokości elementu

Question

Byłem ciekawy, czy mogę uzyskać właściwości elementu z szablonu komponentu. Więc zrobiłem prosty div z klasą i zrobiłem tę klasę:

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() są od BrowserDomAdapter. Mój problem polega na tym, że kiedy próbuję uzyskać wysokość, jest to null, ale kiedy ustawię wysokość o setStyle(), a następnie otrzymam ją przez getStyle(), zwróci ona prawidłową wartość. Po sprawdzeniu DOM i stylów w przeglądarce odkryłem, że jest to spowodowane dwoma elementami CSS. Jedna to: .view-main-screen[_ngcontent-aer-1]{}, a druga to element{}. .view-main-screen ma kilka stylów, ale element jest pusty. Po dodaniu stylów przez setStyle() pojawia się w element{}. Dlaczego? Jak mogę uzyskać właściwości elementu za pomocą Angular2?

Answer 1

Update2

constructor(private elementRef:ElementRef) {} 

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

Uzyskiwanie dostępu nativeElement bezpośrednio nie jest zalecane, ale obecny kątowa nie przewiduje innych sposobów, o ile wiem.

aktualizacja

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

mhevery skomentował 12 dni temu Zdecydowaliśmy się usunąć usługę Linijka, a więc nie jest częścią publicznych API.

oryginalny

O ile wiem, klasa Ruler powinna zapewnić tę funkcjonalność https://github.com/angular/angular/blob/master/modules/angular2/src/platform/browser/ruler.ts jeśli to nie jest wystarczających prawdopodobnie trzeba przejść elementRef.nativeElement i używać bezpośredni dostęp DOM i funkcji dostarczanych przez elementy .

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

Zasady usługa jest bezpieczna w WebWorker. Patrz również uwagi dotyczące https://github.com/angular/angular/issues/6515#issuecomment-173353649

Answer 2

prawidłowy sposób jest użycie @ViewChild() dekorator:

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

Szablon:

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

Składnik:

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

export class viewApp{ 

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

     constructor() { 
     } 

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

To powinno wystarczyć, ale oczywiście musisz dodać dekorator komponentów.

Answer 3

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

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