如何在打字稿中触发调整大小事件

Question

我试图在我的 Angular 应用程序中触发调整大小事件，但它不起作用。得到类似的错误

“UIEvent”类型上不存在属性“initUIEvent”。你的意思是 'initEvent'？

我不知道为什么会收到此错误。如何解决这个问题？

app.component.ts：

  trigger() {
     if (typeof Event === 'function') {
     window.dispatchEvent(new Event('resize'));
  } else {
  var resizeEvent = window.document.createEvent('UIEvents');
  resizeEvent.initUIEvent('resize', true, false, window, 0);
  window.dispatchEvent(resizeEvent);
  }
 }

演示：https://stackblitz.com/edit/angular-vnx4mq?file=src%2Fapp%2Fapp.component.ts

Answer 1

这就是你所需要的。广泛支持。

window.dispatchEvent(new Event("resize"));

如果您有在页面上调整大小的对象，并且它们不在窗口调整大小事件中以执行其任务，则不会触及这些元素。

Answer 2

订阅调整大小的更简单方法是使用fromEventof rxjs 运算符

fromEvent(window, 'resize').pipe(
  debounceTime(200)
).subscribe(() => {
  ...your code here...
})

您可以在单击按钮后在 ngOnInit 或函数中使用：

  tigger(){
    fromEvent(window, 'resize')
      .pipe(debounceTime(200))
      .subscribe(event => {
        console.log('size changed.', event);
      });

  }
  //or
  ngOnInit() {
    fromEvent(window, 'resize')
      .pipe(debounceTime(200))
      .subscribe(event => {
        console.log('size changed.', event);
      });
  }

啊！，如果你不放入app.component，别忘了取消订阅 见stackblitz

注意：我添加了一个 debounceTime 以不执行“每次”