web-dev-qa-db-fra.com

Comment obtenir la largeur / hauteur de l'élément dans les directives et les composants?

@Component({
    selector: '.donation',
    template: `
    <figure id="donation" move>
        <img src="image/qrcode.png"/>
        <figcaption>
        Buy me a cup of coffee.
        </figcaption>
    </figure>
    `
})
export class DonationComponent{}

@Directive({
    selector: '[move]'
})
export class MoveDirective{}

Hé, je veux obtenir la largeur/hauteur de l’élément dans MoveDirective et DonationComponent, j’ai lu le document plusieurs fois mais je n’arrive toujours pas à trouver le moyen de répondre à cette question. Quelqu'un sait-il ceci, aidez-moi, merci beaucoup!

angularangular-directiveangular-components
15
胡亚雄

Vous pouvez utiliser ElementRef comme indiqué ci-dessous,

DEMO: https://plnkr.co/edit/XZwXEh9PZEEVJpe0BlYq?p=preview consultez la console du navigateur.

import { Directive,Input,Outpu,ElementRef,Renderer} from '@angular/core';

@Directive({
  selector:"[move]",
  Host:{
    '(click)':"show()"
  }
})

export class GetEleDirective{

  constructor(private el:ElementRef){

  }
  show(){
    console.log(this.el.nativeElement);

    console.log('height---' + this.el.nativeElement.offsetHeight);  //<<<===here
    console.log('width---' + this.el.nativeElement.offsetWidth);    //<<<===here
  }
}

De la même manière, vous pouvez l’utiliser dans le composant lui-même où vous en avez besoin.

35
micronyks

Pour un peu plus de flexibilité qu'avec micronyks answer, vous pouvez le faire comme ça:

1. Dans votre modèle, ajoutez #myIdentifier À l'élément dont vous souhaitez obtenir la largeur. Exemple:

<p #myIdentifier>
  my-component works!
</p>

2. Dans votre contrôleur, vous pouvez utiliser ceci avec @ViewChild('myIdentifier') pour obtenir la largeur:

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

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.scss']
})
export class MyComponentComponent implements AfterViewInit {

  constructor() { }

  ngAfterViewInit() {
    console.log(this.myIdentifier.nativeElement.offsetWidth);
  }

  @ViewChild('myIdentifier')
  myIdentifier: ElementRef;

}

Sécurité

Concernant le risque de sécurité avec ElementRef, il n’en existe aucun. Il y aurait un risque, si vous modifiez le DOM utilisant un ElementRef. Mais ici vous ne faites que obtenir des éléments DOM, donc il n’ya aucun risque. Un exemple risqué d'utilisation de ElementRef serait: this.myIdentifier.nativeElement.onclick = someFunctionDefinedBySomeUser;. De cette manière, Angular ne peut pas utiliser ses mécanismes d’assainissement, car someFunctionDefinedBySomeUser est inséré directement dans le DOM, sautant la Angular).

13
bersling