如何在 typescript 中触发调整大小事件

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"));

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

Answer 2

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

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

单击按钮后，您可以在 ngOnInit 或 function 中使用：

  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);
      });
  }

啊，。 如果您不放入应用程序，组件，请不要忘记取消订阅，请参阅stackblitz

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