Altezza elemento

Question

Ero curioso di riuscire a ottenere le proprietà degli elementi dal modello del componente. Così ho reso semplice div con classe e ho fatto questa classe:

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() sono da BrowserDomAdapter. Il mio problema è quando cerco di ottenere altezza è null, ma quando ho impostato un po 'di altezza da setStyle() e poi ottengo da getStyle() restituisce il valore corretto. Dopo aver controllato DOM e gli stili nel browser ho scoperto che è a causa di due elementi CSS. Uno è: .view-main-screen[_ngcontent-aer-1]{} e il secondo è element{}. .view-main-screen ha alcuni stili, ma l'elemento è vuoto. Quando aggiungo stili per setStyle(), appare in element{}. Perché? Come posso ottenere le proprietà degli elementi usando Angular2?

Answer 1

Update2

constructor(private elementRef:ElementRef) {} 

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

Accesso nativeElement direttamente è scoraggiato, ma angolare corrente non fornisce altri modi per quanto ne so.

aggiornamento

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

mhevery commentato 12 giorni fa Abbiamo deciso di rimuovere il servizio Righello, e quindi non fa parte della API pubblica.

originale

Per quanto ne so la classe Ruler dovrebbe prevedere che la funzionalità https://github.com/angular/angular/blob/master/modules/angular2/src/platform/browser/ruler.ts se questo non è enought probabilmente è necessario per accedere elementRef.nativeElement e utilizzare l'accesso DOM diretto e funzioni fornite dagli elementi .

servizio

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

regole è sicuro in WebWorker. Vedi anche i commenti sul https://github.com/angular/angular/issues/6515#issuecomment-173353649

Answer 2

Il modo corretto è quello di utilizzare @ViewChild() decoratore:

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

Template:

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

Componente:

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

export class viewApp{ 

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

     constructor() { 
     } 

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

Questo dovrebbe farlo ma ovviamente è necessario aggiungere il decoratore di componenti.

Answer 3

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

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