Öğe boyutu değiştiğinde nasıl gözlenir Angular 2

Question

Şablondaki div boyutu değiştirdiğinde bazı eylemleri gerçekleştirmenin en iyi yolu nedir? Pencere yeniden boyutlandırıldığında divun boyutu değişir. Rxjs ile Gözlemlenebilir/abone olun veya başka bir yol var mı?

Şablon:

<div #eMainFrame class="main-frame"> 
    ... 
</div> 

Bileşen:

@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); 
    } 
} 

Güncelleme bileşen (bu örnek pencere boyutu değiştirildiğinde algılar)

constructor(ngZone: NgZone) { 

    window.onresize = (e) => { 
    ngZone.run(() => { 
     clearTimeout(this.timerWindowResize); 
     this.timerWindowResize = setTimeout(this._calculateDivSize, 100); 
    }); 
    } 
} 

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

ama bu bana bir hata veriyor :

EXCEPTION: Cannot read property 'nativeElement' of undefined

Answer 1

tarayıcı nedenle Açısal çalışır algılama değiştirdiğinizde

ngDoCheck() denir değerini yoklamak gerekir, bir şey sağlamaz. Yalnızca bileşen oluşturulmasından sonra bir kez kontrol etmek gerekirse

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

, sen `element.resize` denediniz

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