25

我将 Bootstrap 用于我的布局，我需要检查我的自动计算大小是否div与 bootstrap 一起改变，例如 width = 25%。

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

(window:resize)是不足够的。

4

4 回答 4

34

您可以将指令添加到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。

于 2016-04-18T15:10:45.223 回答
10

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

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

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

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

于 2019-02-25T10:59:39.367 回答
-1

我已经尝试了正确的答案，但刷新率不是很准确，所以我寻找了另一种解决方案。

这里是

// 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>
于 2018-11-23T00:19:06.240 回答
-3

跟踪 DOM 属性更改的方法很少：

于 2016-04-18T15:28:12.377 回答