如何对 div 大小调整执行变化检测

Question

我使用 Bootstrap 作为我的布局，我需要检查我的 div 的自动计算大小是否已更改 bootstrap 例如 width = 25%。

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

(window:resize) 不够。

Answer 1

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

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

如果 div 在组件模板中，添加一个本地模板变量

<div #myDiv ...>

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

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

请注意，每次运行更改检测时都会调用 ngDoCheck() 和 ngAfterViewChecked()。另请参阅开发指南 Lifecycle Hooks.

Answer 2

跟踪DOM属性变化的方法很少：

轮询即 setInterval
DOM 突变 events: DOMAttrModified + propertychange for IE
实施MutationObserver

Answer 3

我试过正确的答案，但刷新率不是很准确，所以我寻找其他解决方案。

在这里

// Directive
@Directive({
  selector: '[resize-detector]',
})

public constructor(public element: ElementRef<HTMLElement>) {}

public ngOnInit(): void {
// Call detectResize as whe the element inits the windows resize event most likely won't trigger
  this.detectResize();
}

// if you need the windowDimensions add ", [$event]" to @HostListener and pass event to detectResize(event)
@HostListener('window:resize') 
public detectResize(): void {
  console.log(element.nativeElement.offsetWidth);
  console.log(element.nativeElement.offsetHeight);
  // Do you magic here ...
}

然后您可以在任何元素中使用它，例如：

<app-component resize-detector></app-component>

Answer 4

我遇到了同样的问题，所以我使用了名为 Angular-Resize-Event

的轻量级库

https://www.npmjs.com/package/angular-resize-event

<div (resized)="onResized($event)"></div>

安装后只需将此输出事件添加到您要检查大小变化的任何 div。

如何对 div 大小调整执行变化检测

How to perform change detection on div resizing

resize

angular2-changedetection

angular