web-dev-qa-db-fra.com

Comment obtenir la largeur de l'élément (DOM) dans Angular 4 après le chargement de la page

Je cherche une solution dans Angular 4 pour obtenir la largeur de l'élément DOM sans effectuer aucune action (clic ou redimensionnement de la fenêtre), juste après le chargement de la page, mais avant de commencer à dessiner le svg. J'ai trouvé un cas similaire dans ici mais cela ne fonctionne pas pour moi. J'obtiens la même erreur:

ERREUR TypeError: Impossible de lire la propriété 'nativeElement' de undefined

J'ai besoin d'obtenir la largeur du conteneur div pour définir la veiwbox de svg que je dessine à l'intérieur.

Voici le modèle:

<div id="what-is-the-width" class="svg-chart-container">
    <svg [innerHTML]="svg"></svg>
</div>

et fichier TS avec des trucs nécessaires dans ce cas:

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

export class SvgChartComponent implements OnInit {

  @ViewChild('what-is-the-width') elementView: ElementRef;

  constructor() { }

  ngAfterViewInit() {
    console.log(this.elementView.nativeElement);
  }

  ngOnInit() {
    //this method gets the data from the server and draw the svg
    this.getSVGChartData();
  }
}

Quelqu'un a-t-il des idées pour que cela fonctionne?

javascriptangulartypescript
7
mpro

Vous ne pouvez pas avoir la taille d'un élément avant le chargement de la page. Dans le cas où ce n'est pas assez clair, si la page n'est pas chargée, votre élément HTML n'est pas chargé.

Si vous souhaitez définir la fenêtre d'affichage de votre SVG en fonction d'un div, vous devrez attendre que la page se charge, puis modifier la fenêtre d'affichage. C'est parfaitement faisable.

Le moyen le plus rapide de le faire est:

<div #container>Container's width is {{ container.offsetWidth }}</div>
<svg:svg [width]="container.offsetWidth"></svg>

Je vous laisse vous occuper de l'attribut viewBox, car je ne sais pas vraiment ce que vous voulez en faire.

Vous devez ajouter le svg: préfixe pour dire angular ce n'est pas une directive personnalisée, soit dit en passant).

16
user4676340