Tenía curiosidad por saber si puedo obtener las propiedades del elemento desde la plantilla del componente. Así que hice div simple con clase y hice esta clase:
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() son de BrowserDomAdapter . Mi problema es que cuando trato de obtener la altura, es null , pero cuando configuro una altura con setStyle() y luego la obtengo con getStyle() , devuelve el valor adecuado. Después de verificar DOM y estilos en el navegador, descubrí que se debe a dos elementos CSS. Uno es: .view-main-screen[_ngcontent-aer-1]{} y el segundo es element{} . .view-main-screen tiene algunos estilos, pero el elemento está vacío. Cuando agrego estilos por setStyle() aparece en element{} . ¿Porqué es eso? ¿Cómo puedo obtener propiedades de elementos usando Angular2?
La forma correcta es usar el decorador @ViewChild() :
https://angular.io/docs/ts/latest/api/core/index/ViewChild-decorator.html
Modelo:
<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; } }Eso debería hacerlo, pero obviamente necesita agregar su decorador de componentes.
Editar:
Para Angular 8 o posterior, debe proporcionar el segundo parámetro en ViewChild
@ViewChild('mainScreen', {read: ElementRef, static:false}) elementView: ElementRef;actualizar2
constructor(private elementRef:ElementRef) {} someMethod() { console.log(this.elementRef.nativeElement.offsetHeight); } Se desaconseja acceder directamente nativeElement , pero Angular actual no proporciona otras formas, que yo sepa.
actualizar
https://github.com/angular/angular/pull/8452#issuecomment-220460761
mhevery comentó hace 12 días Hemos decidido eliminar el servicio Ruler, por lo que no forma parte de la API pública.
original
Por lo que sé, la clase Ruler debería proporcionar esa funcionalidad https://github.com/angular/angular/blob/master/modules/angular2/src/platform/browser/ruler.ts si esto no es suficiente, probablemente lo necesite para acceder a elementRef.nativeElement y utilizar el acceso DOM directo y las funciones proporcionadas por los elementos.
new Ruler(DOM).measure(this.elRef).then((rect: any) => { });El servicio de reglas es seguro en WebWorker. Consulte también los comentarios en https://github.com/angular/angular/issues/6515#issuecomment-173353649
<div #getElementHeight> Height </div>La altura del elemento es {{ getElementHeight.offsetHeight }}