Cách quan sát khi kích thước phần tử thay đổi trong Angular 2

Question

Cách tốt nhất để thực hiện một số hành động khi div trong mẫu thay đổi kích thước là gì? Kích thước của div thay đổi khi cửa sổ được thay đổi kích thước. Với Rxjs Observable/đăng ký hoặc là một số cách khác?

mẫu:

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

Component:

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

thành phần Cập nhật (ví dụ này phát hiện khi kích thước cửa sổ được thay đổi)

constructor(ngZone: NgZone) { 

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

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

nhưng điều này mang lại cho tôi một lỗi :

EXCEPTION: Cannot read property 'nativeElement' of undefined

Answer 1

Trình duyệt không cung cấp bất cứ điều gì, do đó bạn cần phải thăm dò ý kiến ​​giá trị

ngDoCheck() được gọi khi chạy kiễu góc thay đổi phát hiện. Tôi nghĩ rằng đây là một nơi tốt để làm việc kiểm tra:

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

Nếu bạn chỉ cần phải kiểm tra một lần sau khi tạo thành phần, sử dụng

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