Comment obtenir la largeur de (DOM) de l'Élément dans Angular2

il y a un peu similaire, les threads, mais je ne pouvais pas trouver une réponse convenable
pour mes besoins. De sorte que direct DOM l'accès doit être strictement évités
dans angular2 je me demande quel est la meilleure pratique pour cela.

Ce que je wan pas à atteindre est de redimensionnement d'un élément basé sur la largeur actuelle.

workitemresize.composante.ts

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

@Directive({
  selector: '[workItemResize]'
})

export class WorkItemResizeDirective implements ngAfterViewInit {

  private el: HTMLElement;
  private renderer: Renderer;

  constructor(el: ElementRef, public renderer: Renderer)
  { 
    this.el = el.nativeElement; 
    this.renderer = renderer;
  }  


  @HostListener('window:resize', ['$event.target']) 
  onResize() 
  { 
    this.resizeWorks();
  }

  ngAfterViewInit() {
    this.resizeWorks();
  }

  private resizeWorks(): void {
    this.renderer.setElementStyle(this.el, 'height', this.el.width); //<-- doesn't work I kow that this.el.width doesn't exist but just for demonstration purpose
    this.renderer.setElementStyle(this.el, 'height', '500'); //<-- works
  }

}

projects.template.html

<div class="posts row">
        <div class="work-item col-xs-12 col-sm-6 col-no-padding"  workItemResize *ngFor="let post of posts">

                <!-- show some fancy image -->
                <div class="img"  [ngStyle]="{'background-image':'url('+post.better_featured_image.source_url+')'}"></div>

        </div>
</div>

Liées:
https://github.com/angular/angular/issues/6515

  • Redimensionner basé sur le courant avec les sons comme une boucle sans fin.
  • pas juste après l'initialisation de la vue et de la fenêtre.redimensionner - qui devrait être bon
InformationsquelleAutor kkern | 2016-08-22
  1. 16

    Je ne sais pas un moyen pour obtenir la largeur de l'élément hôte, sans accès à nativeElement mais peut être fait comme:

    @HostListener('window:resize', ['$event.target']) 
onResize() { 
  this.resizeWorks();
}

@HostBinding('style.height.px')
elHeight:number;

private resizeWorks(): void {
  this.elHeight = this.el.nativeElement.width;
}

    Si vous pouvez ajouter un élément à l'intérieur de vos composants de modèle comme

    <div style="width: 100%;" #div (window:resize)="elHeight = div.getBoundingClientRect()">
  <!-- your template here -->
</div>

    alors ce serait un travail sans direct DOM l'accès à tous (mais pas après init).

    • Est-il une différence notable entre le @HostBinding et le Rendu d'approche? Je pense que les deux versions sont beaux? Oh, et ce.el.nativeElement.la largeur est toujours nul... donc j'ai eu du mal avec cela aussi. Ce sujet: c'.moteur de rendu.setElementStyle(ce.el, 'hauteur', cette.el.clientWidth+'px'); Ça fonctionne, mais qui semble étrange pour moi...
    • Le convertisseur approche est très bien. Je trouve le HostBinding approche plus facile à lire. Votre question a this.el.width au lieu de this.el.nativeElement.width. Je suppose resizeWorks est appelée avant que le composant est entièrement affiché ou autrement essayer getBoundingClientRect().width.
    • c'.el les références à el.nativeElement (voir le constructeur). Ok je m'en tiens à la getBoundingClientRect().la largeur. Merci!!!! La dernière ligne de Code: ce.moteur de rendu.setElementStyle(ce.el, 'hauteur', cette.el.getBoundingClientRect().largeur+"px");
    • La droite. Désolé, raté celui-là. Donc getBoundingClientRect() travaillé?
    • Yep ça a très bien fonctionné.
    • Droite, fonctionne comme un charme

    InformationsquelleAutor Günter Zöchbauer
  2. 10

    J'ai essayé @GünterZöchbauer solution et perfectionné. Vous n'avez pas besoin HostListener pour obtenir des limites de la div. Comme avec "clic" ou d'un autre événement (event)="fonction()", il fera feu de cette fonction. J'espère que quelqu'un va trouver cela utile.

    <div #div (window:resize)="onResize(div.getBoundingClientRect())">
   <!-- your template here -->
</div>


onResize() { 
   this.resizeWorks();
}

@HostBinding('style.height.px') elHeight:number;

private resizeWorks(): void {
   this.elHeight = this.el.nativeElement.width;
}

    (#div) - c'est variable nécessaires pour obtenir la mesure de la cible. Il n'a pas à être même nom que l'élément, il peut être n'importe quel nom.

    Un moyen de plus pour obtenir de l'élément dimensions est d'utiliser ElementRef classe Angulaires de Base, mais alors vous devez trouver que l'élément enfant qui a des propriétés width et height. J'ai utilisé ce Angulaire 2 Cartes pour obtenir conteneur largeur et la hauteur, mais je trouve que, à l'aide de cette méthode, j'ai dû trouver dans l'élément de l'arborescence de l'élément qui a ces propriétés, et il était le deuxième enfant de l'élément racine. Il est plus salissant.
    ElementDimensions - est juste une classe avec la hauteur et la largeur que j'ai fait pour contenir ces propriétés.

    <div (window:resize)="onResize()">
   <!-- your template here -->
</div>

private getContainerDimensions(): ElementDimensions{
    var rootElement = this.elementRef.nativeElement;
    var childElement = rootElement.firstElementChild;
    var contentElement =  childElement.firstElementChild;

    return {
        height:contentElement.clientHeight,
        width: contentElement.clientWidth
    };
}
    • Aussi une belle solution!
    InformationsquelleAutor Imants Volkovs
  3. 2

    J'ai testé de cette façon et simplement travaillé! Il semble que la liaison a fait ce travail.

    <div #foto [style.height.px]="foto.getBoundingClientRect().width /2">
    InformationsquelleAutor Charleston
  4. 1

    Vous pouvez obtenir la largeur de l'élément lui-même si celui-ci dispose d'un écran bien défini (de type "bloc" dans l'exemple ci-dessous). Notez que vous devez être en mesure de définir ce style (à l'aide de dom filature):

    :host {
    display:block;
}

    Si vous n'êtes pas en utilisant dom l'occultation des ions (2-3):

    my-component {
    display:block;
}

    Ici est le contrôleur (exposer la largeur comme un fait observable):

    import {AfterViewInit, Component, ElementRef, HostListener, Input} from '@angular/core';
import {Subject} from 'rxjs/Subject';

@Component({
    selector: 'my-component',
    template: '{{$width|async}}',
    style: 'my-component {display: block;}'
})
export class MyComponent implements AfterViewInit {
    @Input() public gridWidth: number;
    private $width: Subject<number> = new Subject();

    constructor(private elementRef: ElementRef) {
    }

    public ngAfterViewInit(): void {
        this.emitWidth();
    }

    @HostListener('window:resize', ['$event.target'])
    public onResize(): void {
        this.emitWidth();
    }

    private emitWidth(): void {
        this.$width.next(this.getWidth());
    }

    private getWidth(): number {
        return this.getNativeElement().clientWidth;
    }

    private getNativeElement(): HTMLElement {
        return this.elementRef.nativeElement;
    }
}
    InformationsquelleAutor Flavien Volken