2016-11-17 30 views
9

Bir çözüm arıyordum, ama hiçbir şey bulunamadı (sadece (window:resize) ile ilgili makaleler, ama bu aradığım değil).Öğe yüksekliği ve genişlik değişimi algılama Açısal 2

Öğe boyutu değişikliği nasıl algılanır? Angular 2?

<div #myElement (sizeChanged)="callback()" /> 

bazı CSS animasyonlar kullanabilir ve elementin height ve width değişiklikleri saptamak istiyoruz.

+0

Bunu çözdünüz mü? Çünkü ben de aynı şeyi istiyorum. – Pranjal

cevap

7

Sorun, bir Açısal 2 sorunu bile değil. Daha genel olarak, window dışındaki herhangi bir öğedeki boyut değişikliklerini nasıl tespit edersiniz? onresize olayı var, ancak bu yalnızca window için tetikleniyor ve başka hiçbir açık çözüm bulunmuyor.

Pek çok yaklaşımın genel yolu, örneğin 100 ms'lik bir aralık ayarlamak ve değişimin algılanması için div'un genişliğini ve yüksekliğini kontrol etmektir. Göründüğü kadar korkunç, bu en yaygın yaklaşımdır.

this answer'dan daha genel soruya, yalnızca bir etkinlik kullanarak bunu yapmak için bir kütüphane var: http://marcj.github.io/css-element-queries/. Sözde, oldukça iyi. Aradığınızı öğrenmek için ResizeSensor'u kullanırsınız.

Elbette, yalnızca pencere açıldığında yeniden boyutlandırmak için div olmasını beklersiniz. Sonra onresize sizin için ne olduğunu.

İlgili konular