angular2 détection de changement de taille du div

J'utilise bootstrap pour ma mise en page et j'ai besoin de vérifier si le système de la taille calculée de mes DIV avec bootstrap par exemple width = 25% est changé.

Est-il une possibilité de faire de la détection de changement sur un attribut dont je n'ai pas mis dans mon template, mais qu'elle est définie par bootstrap. (fenêtre:redimensionner) n'est pas suffisant.

thx

  • Pourriez-vous fournir un plunkr? Merci 😉
InformationsquelleAutor Michael Burger | 2016-04-18
  1. 24

    Vous pouvez ajouter une directive à l' div et de mettre en œuvre du cycle de vie de crochet ngDoCheck() pour effectuer votre changement de logique de détection. Vous aurez besoin d'injecter de ElementRef:

    constructor(private _elRef:ElementRef) {}
ngDoCheck() {
   //use ElementRef to examine the div property of interest

    Si le div est à l'intérieur d'un modèle de composant, ajouter un modèle local variable

    <div #myDiv ...>

    Ensuite utiliser @ViewChild() pour obtenir une référence à la div et de mettre en œuvre du cycle de vie de crochet ngDoCheck() ou ngAfterViewChecked() pour effectuer votre changement de logique de détection. 

    @ViewChild('myDiv') theDiv:ElementRef;
ngAfterViewChecked() {
   //use this.theDiv to examine the div property of interest

    Noter que ngDoCheck() et ngAfterViewChecked() sera appelée à chaque changement de détection fonctionne. Voir aussi le dev guide Cycle De Vie Des Crochets.

    • La solution à ce problème ne fonctionne pas pour moi parce que j'ai besoin de connaître la TAILLE réelle (w x h) de la div. Mon div a une largeur relative 33,33% et cela ne change pas. Mais la taille effective de la DIV changé certaines choses dans mon APPLICATION. le problème est que si je n'en ngDoCheck quelque chose comme ça nouvelle Règle(DOM).mesure(ce.elementRef).puis((rect: Rectangle) => { console.log(rect.la largeur); }); } afin de vérifier la véritable largeur-je obtenir une boucle, je ne sais pas pourquoi mais l'appel de la masure pr faire un changement sur les dom et donc il y a un infite boucle sur componente. Quelques idées? Mais je peux utiliser cette solution à d'autres problèmes =)
    • measure() (ou à la promesse qu'il retourne) est susceptible de singe-patché par Zone.js et, lorsque le asynchrones événement se déclenche (et d'après le gestionnaire d'événement s'exécute), Angulaire du crochet court de détection des changements de nouveau. Vous pouvez résoudre ce problème en cours d'exécution de votre code en dehors de la zone Angulaire. Injecter NgZone, puis vérifiez votre div de taille à l'extérieur de la zone: this._ngZone.runOutsideAngular(_ => { // ... check div size here });.
    • - Je mettre en œuvre votre solution, faire un par rapport compliquer logique pour vérifier si j'ai dû réinitialiser la hauteur, parce que DoCheck est appelé aussi sur beaucoup d'autres événements, par exemple sur le curseur de la div, mais il n'est pas nécessaire de réinitialiser la hauteur. DoCheck n'est pas appelé lors du redimensionnement de la fenêtre, j'ai donc ajouté (fenêtre:redimensionner) au composant qui appelle la même logique de définir et calc nouvelle hauteur si nécessaire.
    InformationsquelleAutor Mark Rajcok
  2. 2

    J'ai eu le même problème j'ai donc utilisé le léger bibliothèque appelée Angulaires-Redimensionner-Événement

    https://www.npmjs.com/package/angular-resize-event

    <div (resized)="onResized($event)"></div>

    Après l'installation, il suffit d'ajouter cette sortie événement à toute div dont vous souhaitez vérifier les changements de taille.

    InformationsquelleAutor Dilshan Liyanage
  3. -1

    J'ai essayé d'avoir la bonne réponse, mais le taux de rafraîchissement n'était pas très précis, j'ai Donc cherché une autre solution.

    Ici, il est

    //Directive
@Directive({
  selector: '[resize-detector]',
})

public constructor(public element: ElementRef<HTMLElement>) {}

public ngOnInit(): void {
//Call detectResize as whe the element inits the windows resize event most likely won't trigger
  this.detectResize();
}

//if you need the windowDimensions add ", [$event]" to @HostListener and pass event to detectResize(event)
@HostListener('window:resize') 
public detectResize(): void {
  console.log(element.nativeElement.offsetWidth);
  console.log(element.nativeElement.offsetHeight);
  //Do you magic here ...
}

    Alors vous pouvez l'utiliser dans n'importe quel élément comme:

    <app-component resize-detector></app-component>
    • Il ne fonctionne que lorsque le redimensionnement de la fenêtre, mais si il y a un élément interactif, la modification de notre cible est de taille, il ne sera pas enregistré.
    InformationsquelleAutor T04435
  4. -2

    Il existe quelques méthodes pour suivre les DOM modifications d'attribut:

    • MutuationObserver marche bien, mais j'ai remarqué que j'ai besoin d'un peu plus d'un observateur pour l'attribut, parce que mon DIV de LARGEUR est toujours 33,33% j'ai besoin de savoir quand le réel calculé la TAILLE de mon DIC conteneur a changé. Une idée?
    • vous avez besoin de quelque chose comme window.getComputedStyle(element)
    • oui, mais quand devrais-je appeler cela? Je ne peux pas appeler ça sur MutationObserver parce que l'attribut n'est pas changé, il est encore 33,33%
    • ok, il y a un autre approach
    • ok, mais il y a encore plusieurs problèmes 1) je ne suis pas capable d'attacher un écouteur pour 'ontransitionend' il semble que il n'y a aucun événement pour ce dans angular2 2) comme vous pouvez le voir sur cette plnkr plnkr.co/modifier/UJ9gOpBJti30oTx5lhLL?p=preview il y a un containerDIV et un myDIV, cliquez sur le bouton pour redimensionner containerDIV la transition ne fonctionne pas pour myDIV, il ne fonctionne que si je définis la largeur de myDIV ... mais mon problème est le enveloppés composant à l'aide de bootstrap et de la largeur de 33,33% est autside mon composant, mon composant auto a 100% de la largeur de la sorte, la div est redimensionnée, car il est à 100%, mais il n'y a pas de transition
    • la seule solution qui vient à l'esprit est l'utilisation de css media queries. cochez cette bibliothèque
    • qui pourrait être aussi une bonne solution, pour l'instant j'ai résolu mon problème hier avec la première réponse @Mark Rajcok, je mets en œuvre une DoCheck livecycle et faire, il y un parent compliquer logique pour vérifier si j'ai vraiment va calculer ma taille nouvelle l'obtention de la valeur de la largeur par getComputedStyle, parce que DoCheck est appelé trop souvent également de placer le pointeur de la div, et là j'ai envie de le recalcul de la hauteur de la div. J'ai aussi mis un (fenêtre:redimensionner) de composant car DoCheck n'est pas appelée sur la fenêtre de redimensionnement, je ne sais pas pourquoi
    • Angulaire n'est pas un singe, patch la fenêtre de l'événement de redimensionnement, d'où la raison ngDoCheck() n'est pas appelé lorsque vous redimensionnez une fenêtre.

    InformationsquelleAutor kemsky