在窗戶調整大小時寫了一個角度13個組件，在DIV中繪制某些東西。
問題是獲得DIV的渲染寬度。如果我不使用170ms延遲使用setTimeout（），this.treemap.nativeElement.offsetWidth則為零。
由于TREEMAP每次視窗調整大小重新渲染時，我還嘗試調度從ngafterviewInit（）調度視窗調整大小事件（），但它也似乎也發生得太快（也是再次，this.treemap.nativeElement.offsetWidth為零）。
模板的相關部分......
<div #treemap class="treemap col-12"></div>
和縮寫代碼......
// Details omitted for brevity
export class TreemapComponent implements AfterViewInit {
@ViewChild('treemap') treemap!: ElementRef
@HostListener('window:resize', ['$event'])
private render() {
const width = this.treemap.nativeElement.offsetWidth
// code that successfully renders a treemap in the div as long as width != 0
}
callHack(): void {
setTimeout(() => this.render(), 170) // testing shows 170ms is lowest possible
}
ngAfterViewInit(): void {
this.callHack()
// window.dispatchEvent(new Event('resize')) // happens too fast (offsetWidth = 0)
}
追逐錯誤的生命周期事件鉤子（這篇文章建議ngafterviewinit）？
是否有一個較少的言話法來在角度13中制作這項作業？
uj5u.com熱心網友回復：
您可以使用 aResizeObserver來觀察元素本身而不是視窗。
export class TreemapComponent implements AfterViewInit, OnDestroy {
@ViewChild('treemap') treemap!: ElementRef;
treemapObserver = new ResizeObserver(() => this.render());
private render() {
const width = this.treemap.nativeElement.offsetWidth;
// code that successfully renders a treemap in the div as long as width != 0
}
ngAfterViewInit(): void {
this.treemapObserver.observe(this.treemap.nativeElement);
}
ngOnDestroy() {
this.treemapObserver.unobserve(this.treemap.nativeElement);
}
}
歸功于這個答案：https ://stackoverflow.com/a/39312522/12914833
uj5u.com熱心網友回復：
嘗試呼叫 ngAfterViewChecked() 而不是 ngAfterViewInit()
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/452193.html