Jaki jest najlepszy sposób na wykonanie jakiegoś działania, gdy element div zmienia rozmiar? Rozmiar div zmienia się po zmianie rozmiaru okna. Z Rxjs można obserwować/subskrybować lub jest jakiś inny sposób?Jak obserwować, kiedy zmienia się rozmiar elementu w Angular 2
Szablon:
<div #eMainFrame class="main-frame">
...
</div>
Składnik:
@Component({
selector: 'app-box',
templateUrl: './box.component.html',
styleUrls: ['./box.component.css']
})
export class BoxComponent implements OnInit {
@ViewChild('eMainFrame') eMainFrame : ElementRef;
constructor(){}
ngOnInit(){
// This shows the elements current size
console.log(this.eMainFrame.nativeElement.offsetWidth);
}
}
zaktualizowanego składnika (przykład ten wykrywa, gdy rozmiar okna zostanie zmieniony)
constructor(ngZone: NgZone) {
window.onresize = (e) => {
ngZone.run(() => {
clearTimeout(this.timerWindowResize);
this.timerWindowResize = setTimeout(this._calculateDivSize, 100);
});
}
}
_calculateDivSize(){
console.log(this.eMainFrame.nativeElement.offsetWidth);
}
ale to daje mi błąd :
EXCEPTION: Cannot read property 'nativeElement' of undefined
Czy próbowałeś 'element.resize'? Może to pomóc: http://stackoverflow.com/questions/21170607/angularjs-bind-to-directive-resize – Rajesh