2017-03-16 17 views
5

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

+0

Czy próbowałeś 'element.resize'? Może to pomóc: http://stackoverflow.com/questions/21170607/angularjs-bind-to-directive-resize – Rajesh

Odpowiedz

4

przeglądarka nie zapewnia niczego, dlatego trzeba odpytywać wartości

ngDoCheck() jest wywoływana, gdy kątowe biegnie zmienić wykrycia. Myślę, że jest to dobre miejsce, aby wykonać sprawdzenia:

ngDoCheck() { 
    console.log(this.eMainFrame.nativeElement.offsetWidth); 
} 

Jeśli trzeba tylko sprawdzić raz po stworzeniu składnika, należy

ngAfterContentInit(){ 
    // This shows the elements current size 
    console.log(this.eMainFrame.nativeElement.offsetWidth); 
} 
+0

Funkcja ngDoCheck działa, ale funkcja ngDoCheck() będzie wywoływana wiele razy. – user3800924

+1

Za każdym razem, gdy działa wykrywanie zmian. To zależy od twoich dokładnych wymagań i jeśli istnieje zdarzenie, które możesz wykorzystać do lepszego czasu, kiedy odczytać rozmiar. –

Powiązane problemy