web-dev-qa-db-fra.com

détection de changement angular2 sur red dim

J'utilise bootstrap pour ma mise en page et je dois vérifier si la taille calculée automatiquement de ma DIV avec bootstrap, par exemple width = 25%, a été modifiée.

Est-il possible de détecter les modifications sur un attribut que je n'ai pas défini dans mon modèle, mais qui est défini par bootstrap. (fenêtre: redimensionner) ne suffit pas.

tHX

resizeangularangular2-changedetection
15
Michael Burger

Vous pouvez ajouter une directive à la div et implémenter le cycle de cycle de vie ngDoCheck() pour exécuter votre propre logique de détection de changement. Vous devrez injecter ElementRef:

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

Si la variable div se trouve dans un modèle de composant, ajoutez une variable de modèle local.

<div #myDiv ...>

Utilisez ensuite @ViewChild() pour obtenir une référence à div et implémentez le cycle de cycle de vie cycle ngDoCheck() ou ngAfterViewChecked() pour exécuter votre propre logique de détection de changement. 

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

Notez que ngDoCheck () et ngAfterViewChecked () seront appelés à chaque exécution de la détection de changement. Voir aussi le guide de développement Lifecycle Hooks .

23
Mark Rajcok

J'ai eu le même problème alors j'ai utilisé la bibliothèque légère appelée Angular-Resize-Event

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

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

Après l’avoir installé, ajoutez simplement cet événement de sortie à n’importe quelle div pour laquelle vous souhaitez vérifier les changements de taille.

0
Dilshan Liyanage

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

C'est ici

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

Ensuite, vous pouvez l’utiliser dans n’importe quel élément tel que:

<app-component resize-detector></app-component>
0
T04435

Il existe peu de méthodes pour suivre les modifications d'attributs DOM:

0
kemsky