web-dev-qa-db-fra.com

Obtenir la hauteur de l'élément

J'étais curieux si je pouvais obtenir le gabarit de composant de formulaire de propriétés d'élément . J'ai donc fait simple div avec class et cette 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() sont de BrowserDomAdapter . Mon problème est lorsque j'essaie d'obtenir une hauteur, il est null, mais lorsque je règle une hauteur par setStyle() et que je l'obtiens par getStyle(), elle renvoie la valeur correcte . Après avoir vérifié DOM et les styles dans le navigateur, j'ai découvert que c'était à cause de deux éléments CSS. Le premier est: .view-main-screen[_ngcontent-aer-1]{} et le second est element{}..view-main-screen a quelques styles, mais l'élément est vide. Quand j'ajoute des styles par setStyle(), il apparaît dans element{}. Pourquoi donc? Comment puis-je obtenir les propriétés des éléments en utilisant Angular2?

propertiestypescriptangular
15
Arth

La bonne façon consiste à utiliser @ViewChild() décorator:

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

Modèle:

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

Composant:

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

export class viewApp{

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

      constructor() {
      }

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

Cela devrait le faire, mais vous devez évidemment ajouter votre décorateur de composants.

38
Jon Catmull

update2

constructor(private elementRef:ElementRef) {}

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

L'accès direct à nativeElement est découragé, mais Angular actuel ne fournit pas d'autres moyens, à ma connaissance.

mettre à jour

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

mhevery a commenté il y a 12 jours Nous avons décidé de supprimer le service Ruler. Il ne fait donc pas partie de l'API publique.

original

Autant que je sache, la classe Ruler devrait fournir cette fonctionnalité https://github.com/angular/angular/blob/master/modules/angular2/src/platform/browser/ruler.ts if this n’est pas suffisant, vous devez probablement accéder à elementRef.nativeElement et utiliser un accès DOM direct et les fonctions fournies par les éléments.

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

Le service de règles est sécurisé dans WebWorker. .__ Voir également les commentaires sur 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