Question

我想检测方向变化，以检测我是在纵向模式还是横向模式下查看我的应用程序。那么是否发生了诸如方向变化之类的事件，我可以将其传递给组件中的hostlistener来检测方向变化？

P.S-有些人说这是一个重复的问题。我不希望使用简单的Java脚本方式，而希望使用角度方式来检测方向变化。

Answer 1

From MDN;您可以使用window:orientationchange来检测设备的方向何时更改。

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

下面是一个简短的剪辑，可以在Chrome Dev Tools中查看此操作：https://streamable.com/o2ilm

Answer 2

window:orientationchange很棒而且更干净，并同意?Andrew Hill，但是它不适用于桌面浏览器。据MDN称，我发现检查浏览器的宽度和高度以及确定是纵向还是横向

@Directive({
  selector: '[orientatio]'
})
export class OrientatioDirective {

  @HostBinding('class') state;

  ngOnInit() {
    this.updateOrientatioState();
  }

  @HostListener("window:resize") updateOrientatioState() {
    if (window.innerHeight > window.innerWidth) {
      this.state = 'portrait'
    } else {
      this.state = 'landscape'
    }
  }

}

模板

<div orientatio>
   this is magic ?‍♂️ 
</div>

demo??

检查此答案?Detect viewport orientation, if orientation is Portrait display alert message advising user of instructions

?orientation-change by davidwalsh

的另一个有用示例

是否有任何使用@HostListener进行方向更改的窗口事件，就像我们有@HostListener（“ window：scroll”，['$ event']）用于滚动一样？

2 个答案: