关于屏幕方向问题
使用ionic-native中的screen-orientation
ionic cordova plugin add cordova-plugin-screen-orientation
npm install --save @ionic-native/screen-orientation
app.module.ts 的 providers 进行引用 ScreenOrientation。
在真机中才会看到效果,可以配合页面的生命周期进行设置,也可以在app.component.ts中全局设置
设置:
import { ScreenOrientation } from ‘@ionic-native/screen-orientation‘;
constructor(private screenOrientation: ScreenOrientation) { }
// get current
console.log(this.screenOrientation.type); // logs the current orientation, example: ‘landscape‘
// set to landscape
this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.LANDSCAPE);
// allow user rotate
this.screenOrientation.unlock();
// detect orientation changes
this.screenOrientation.onChange().subscribe(
() => {
console.log("Orientation Changed");
}
);
举例:reportPage【报表页面,需要横屏显示,页面返回后取消锁定】
ionViewWillEnter(){
this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.LANDSCAPE);
}
ionViewWillLeave(){
this.screenOrientation.unlock();
}
ionViewDidLoad() {
}
锁定方向
portrait-primary Portrait模式, Home键在下边
portrait-secondary Portrait模式, Home键在上边
landscape-primary Landscape模式, Home键在右边
landscape-secondary Landscap模式, Home键在左边
portrait: 所有portrait模式
landscape: 所有landscape模式
官方详细内容
https://ionicframework.com/docs/native/screen-orientation/