是否有任何使用 @HostListener 来改变方向的窗口事件，就像我们有 @HostListener("window:scroll", ['$event']) 进行滚动一样？

Posted 2023-03-31

【中文标题】是否有任何使用 @HostListener 来改变方向的窗口事件，就像我们有 @HostListener("window:scroll", [\'$event\']) 进行滚动一样？ [复制]

【英文标题】：Is there any window event for orientation change using @HostListener like we have @HostListener("window:scroll", ['$event']) for scrolling? [duplicate]是否有任何使用 @HostListener 来改变方向的窗口事件，就像我们有 @HostListener("window:scroll", ['$event']) 进行滚动一样？ [复制]

【发布时间】：2019-07-12 06:30:38

【问题描述】：

我想检测方向变化，以检测我是在纵向模式还是横向模式下查看我的应用程序。那么有没有像方向变化这样的事件，我可以在组件的主机监听器中传递来检测方向变化？

P.S - 有些人说这是重复的问题。我不想要普通的 java 脚本方式，我想要有角度的方式来检测方向变化。

【问题讨论】：

window:resize?

我特别需要 @HostListener 的事件来改变方向

如果您使用的是 Angular，那么我建议您应该使用官方的 Angular CDK。您需要的是布局模块。 material.angular.io/cdk/layout/overview

@SplitterAlex - 这个家伙不需要为原生浏览器事件引入整个 Angular CDK...

【参考方案1】：

From MDN;您可以使用window:orientationchange 来检测设备的方向何时发生了变化。

@HostListener('window:orientationchange', ['$event'])
onOrientationChange(event) 
  console.log('orientationChanged');

这是一个短片，可以在 Chrome 开发工具中看到这一点：https://streamable.com/o2ilm

【讨论】：

精彩活动?，不过这个只支持手机?根据mdn我觉得window:resize会更好

我看不到如何将方向应用于桌面？

你可以使用chrome开发工具测试一下

@malbarmawi - 他专门要求进行方向检测......而不是调整大小。 Chome 开发工具允许您模拟设备并更改测试方向。

谢谢@AndrewHill 我实际上实现了正确的事件。我只是不知道如何在浏览器上触发事件。它就像一个魅力！