我想检测方向变化,以检测我是在纵向模式还是横向模式下查看我的应用程序。那么是否发生了诸如方向变化之类的事件,我可以将其传递给组件中的hostlistener来检测方向变化?
P.S-有些人说这是一个重复的问题。我不希望使用简单的Java脚本方式,而希望使用角度方式来检测方向变化。
答案 0 :(得分:1)
From MDN;您可以使用window:orientationchange
来检测设备的方向何时更改。
@HostListener('window:orientationchange', ['$event'])
onOrientationChange(event) {
console.log('orientationChanged');
}
下面是一个简短的剪辑,可以在Chrome Dev Tools中查看此操作:https://streamable.com/o2ilm
答案 1 :(得分:0)
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>
的另一个有用示例