Question

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

模板：

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

但这给了我一个错误：

例外：无法阅读属性＆＃39; nativeElement＆＃39;未定义的

Answer 1

浏览器不提供任何内容，因此您需要轮询值

当Angular运行更改检测时，将调用

ngDoCheck()。我认为这是一个检查的好地方：

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

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

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

如何观察角度2

1 个答案: