ionic3 關於屏幕方向問題

關於屏幕方向問題

使用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/