如何在div调整大小上执行更改检测 [英] How to perform change detection on div resizing

问题描述

我将Bootstrap用于布局，我需要检查是否自动更改了我的 div 的大小(例如，宽度= 25％)并带有引导程序.

I use Bootstrap for my layout and I need to check if the automatic calculated size of my div with bootstrap for example width = 25% is changed.

如何对我未在模板中设置但由Bootstrap设置的属性执行更改检测?

How to perform change detection on a attribute which I don't set in my template, but is set by Bootstrap?

(窗口:调整大小)是不够的.

推荐答案

您可以向 div 添加指令，并实现生命周期挂钩 ngDoCheck()来执行自己的操作更改检测逻辑.您需要注入 ElementRef :

You can add a directive to the div and implement lifecycle hook ngDoCheck() to perform your own change detection logic. You'll need to inject ElementRef:

constructor(private _elRef:ElementRef) {}
ngDoCheck() {
   // use ElementRef to examine the div property of interest

如果 div 在组件模板内部，请添加本地模板变量

If the div is inside a component template, add a local template variable

<div #myDiv ...>

然后使用 @ViewChild()获取对 div 的引用，并实现生命周期挂钩 ngDoCheck()或 ngAfterViewChecked()来执行您自己的变更检测逻辑.

Then use @ViewChild() to get a reference to the div and implement lifecycle hook ngDoCheck() or ngAfterViewChecked() to perform your own change detection logic.

@ViewChild('myDiv') theDiv:ElementRef;
ngAfterViewChecked() {
   // use this.theDiv to examine the div property of interest

请注意，每次运行更改检测时，都会调用ngDoCheck()和ngAfterViewChecked().另请参阅开发指南生命周期挂钩.

Note that ngDoCheck() and ngAfterViewChecked() will be called every time change detection runs. See also the dev guide Lifecycle Hooks.

这篇关于如何在div调整大小上执行更改检测的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！