Comment obtenir de l'élément de largeur/hauteur à l'intérieur de directives et de composants?

JS:

@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{}

Hey,je veux obtenir de l'élément de largeur/hauteur à l'intérieur de MoveDirective et DonationComponent,j'ai lu le document plusieurs fois, mais ne peut toujours pas trouver un moyen de cette réponse.Ne savez cette s'il vous plaît aidez-moi,merci beaucoup!

InformationsquelleAutor | 2016-10-02
  1. 34

    Vous pouvez utiliser ElementRef comme indiqué ci-dessous,

    DÉMO : https://plnkr.co/edit/XZwXEh9PZEEVJpe0BlYq?p=preview vérifier le navigateur de la console.

    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
  }
}

    Même façon, vous pouvez l'utiliser dans le composant lui-même partout où vous en avez besoin.

    • Merci beaucoup,Ça fonctionne parfaitement!Mais je suis encore un peu confus au sujet de pourquoi à l'aide de offsetHeight mais pas à la hauteur de la propriété afin d'obtenir l'élément de la hauteur?
    • ElementRef a été marqué comme risque pour la sécurité: angular.io/docs/js/latest/api/core/index/ElementRef-class.html - est-ce toujours ok pour l'utiliser?
    • il n'y a pas de risque, puisque vous êtes également l'extraction d'informations à partir de la DOM, pas d'insérer des éléments dangereux.
    • Qu'en est-il si les enfants de l'accueil de l'élément ont une plus grande largeur ou la hauteur de l'hôte. Comment pouvons-nous obtenir la bonne largeur et la hauteur de l'élément hôte?
    • Cela peut-il être fixé à la poignée de redimensionnement des événements? Ou est-ce vraiment hacky?
    • Oui, vous pouvez le faire, ou vous pouvez utiliser windows.resize() événement aussi mais google il de sorte que vous saurez plus à ce sujet.
    • à la recherche comme ngDoCheck() et de tests à l'intérieur pour _ele.nativeElement.clientWidth en est une. Évidemment, en faisant attention de ne pas déclencher une action à chaque fois qu'il s'appelle! Semble fonctionner pour ce dont j'ai besoin (maison responsive design). Thx
    • La démo ne fonctionne pas...

    InformationsquelleAutor micronyks
  2. 13

    Pour un peu plus de souplesse qu'avec micronyks réponse, vous pouvez le faire comme ça:

    1. Dans votre modèle, ajouter #myIdentifier à l'élément que vous voulez pour obtenir la largeur de l'. Exemple:

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

    2. Dans votre contrôleur, vous pouvez l'utiliser 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;

}

    De sécurité

    Sur les risques en matière de sécurité ElementRef, comme ça, il n'y a aucun. Il y aurait un risque, si vous modifier les DOM à l'aide d'un ElementRef. Mais ici, vous êtes à seulement arriver les Éléments DOM, donc il n'y a pas de risque. Un pari risqué exemple d'utilisation de ElementRef serait: this.myIdentifier.nativeElement.onclick = someFunctionDefinedBySomeUser;. Comme ce Angulaire de ne pas obtenir une chance d'utiliser ses epuration des mécanismes depuis someFunctionDefinedBySomeUser est inséré directement dans les DOM, sauter l'angle d'epuration.

    • Comment cette poignée de redimensionnement des événements?
    • Il n'a pas, mais vous pouvez ajouter un @HostListener fenêtre:redimensionner, voir par exemple scotch.io/tutoriels/...
    • j'ai essayé de suivre votre exemple, mais "cette.myIdentifier" renvoie undefined...
    InformationsquelleAutor bersling