如何观察Angular 2中元素大小的变化

Question

当模板中的div更改大小时执行某些操作的最佳方式是什么？调整窗口大小时，div的大小会发生变化。使用Rxjs Observable /订阅还是以其他方式？

模板：

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

组件：

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

更新组件（本实施例中检测当窗口尺寸被改变）

constructor(ngZone: NgZone) { 

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

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

但是这给我一个错误：

EXCEPTION: Cannot read property 'nativeElement' of undefined

Answer 1

的浏览器不提供任何东西，因此你需要轮询值时运行角度变化检测

ngDoCheck()被调用。我认为这是做检查的好去处：

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

如果您只需要组件创建后检查一次，使用

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