如果组件的DOM元素的宽度发生变化，如何调用函数？ （Angular4）

Question

如果更改了宽度组件的DOM元素，我必须重新计算一些内容。没有Angular，我就这样解决了：

var old_width = $("#container").width();
update();

$(window).on('resize',function() {
    var new_width = $("#container").width();
    if(old_width != new_width) {
        old_width = new_width;
        update();
    }
});

我想用Angular来解决这个问题。不幸的是，常规元素没有resize事件，但我想以某种方式听它。我可以在我的JQuery解决方案中使用setInterval或window.resize，但我希望我能够以更好的方式使用Angular来管理它。

MutationObserver不起作用，因为它会侦听属性的变化，但我要找的是计算样式的变化。

Answer 1

我将举例说明如何使用窗口调整大小响应性地设计我的iphone组件。这样，您可以更好地了解如何使用它。以下是我的HTML

<div class="main-add" (window:resize)="onResize($event)" 
[style.margin-left]="addMarginLeft">
  <img (click)="onAdd()" src="/images2/iphone7-add.jpeg" 
[style.width]="addWidth">
</div>

<rb-product-list [query]="productQuery"></rb-product-list> 

以下是我的组件

ngOnInit()
  this.getAddResponsive();
}   
onResize(event: any) {
  this.getAddResponsive();
}
getAddResponsive(){
  this.addWidth = 1000 + 'px';
  let delta = (window.innerWidth - 1000)*.5 ;
  if(delta > 0)
    this.addMarginLeft = delta + 'px';
  else {
    if((window.innerWidth - 20) > 530)
        this.addWidth = window.innerWidth - 20 + 'px';
    else this.addWidth = '530px';

    this.addMarginLeft = '0px';
  }
}

下面是它的外观。希望这可以帮助。

Answer 2

可以使用resize收听

HostListener个事件。值流是RxJS可观察量的完美用例，它们提供了开箱即用的高级控制：

resizeSubject = new Subject();

@HostListener('window:resize', ['$event'])
resizeListener(e) {
    this.resizeSubject.next({
        width: e.target.innerWidth,
        height: e.target.innerHeight,
    });
}

ngOnInit() {
    this.resizeSubscription = this.resizeSubject.asObservable()
    .debounceTime(100)
    .map(({ width }) => width)
    .distinctUntilChanged()
    .subscribe(width => {
      // Debounced width, value changes only
      console.log(width);
    });
}

ngOnDestroy() {
    this.resizeSubscription.unsubscribe();
}