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

我试图在angular应用程序中触发resize事件，但它不起作用。像这样得到错误

类型“UIEvent”上不存在属性“initUIEvent”。你是说 “初始化事件”

我不知道为什么会出现这个错误。如何解决这个问题

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

---

演示：

这就是您所需要的一切。得到广泛支持

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

---

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

订阅调整大小的更简单方法是使用rxjs操作符的

fromEvent

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，别忘了取消订阅 见

---

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

您使用的浏览器是什么？你的示例笔在Chrome、Firefox、Safari和最新的IE中运行得非常好。@tao:检查所有浏览器..就像Chrome、Firefox、Safari、IE一样，你似乎误解了我的问题：它应该是：“当你出现错误时，你在使用什么浏览器？”他们告诉你@tao@tao：else条件代码在chrome firefox中不工作，请阅读该代码。很清楚。window.onresize=（）=>{}应该包含在调整大小时更新的函数。不幸的是，在这种情况下，强制调整大小与requestAnimationFrame策略冲突。如果您需要强制调整大小，请不要在超时时调用它，这是不正确的。要知道，当浏览器失去焦点时，这些计时器不会按其方式更新。这个RAF将使整个过程闲置到1fps，您可以绕过它，因为它会导致非常无响应的编码实践。：）不行：@Sansara，我帮你完成了stackblitz并更新了答案。我希望这有助于您不在onclick条件下工作：Sansara，请注意执行的操作是“subscribe”下的指令-您可以在该条件下调用函数：