由于 ionic 3 未检测到内置的 onchange 函数，因此如何在 ionic 3 中实现最新的屏幕方向？

Question

我也搜索过类似的问题，但 none 对我有用。

我已经在新创建的应用程序中安装了屏幕方向插件，并且运行它具有默认功能。
但它总是显示错误，

离子信息：

Ionic:

   ionic (Ionic CLI)  : 4.0.2 (C:\Users\Anurag\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework    : ionic-angular 3.9.5
   @ionic/app-scripts : 3.2.2

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : not available

System:

   Android SDK Tools : 26.1.1
   NodeJS            : v8.10.0 (C:\Program Files\nodejs\node.exe)
   npm               : 5.6.0
   OS                : Windows 10

获取当前屏幕方向类型时显示下面提到的错误：

ERROR TypeError: Object(...) is not a function  
    at ScreenOrientation.get [as type] (vendor.js:81072)  
    at HomePage.webpackJsonp.248.HomePage.getCurrentScreenOrientation (main.js:64)  
    at Object.eval [as handleEvent] (HomePage.html:11)  
    at handleEvent (vendor.js:14225)  
    at callWithDebugContext (vendor.js:15734)  
    at Object.debugHandleEvent [as handleEvent] (vendor.js:15321)  
    at dispatchEvent (vendor.js:10640)  
    at vendor.js:11265  
    at HTMLButtonElement.<anonymous> (vendor.js:40134)  
    at t.invokeTask (polyfills.js:3)

屏幕方向状态更改时显示以下错误：

ERROR TypeError: Object(...) is not a function  
    at ScreenOrientation.onChange (vendor.js:81068)  
    at HomePage.webpackJsonp.248.HomePage.observeScreenOrientation (main.js:84)  
    at Object.eval [as handleEvent] (HomePage.html:14)  
    at handleEvent (vendor.js:14225)  
    at callWithDebugContext (vendor.js:15734)  
    at Object.debugHandleEvent [as handleEvent] (vendor.js:15321)  
    at dispatchEvent (vendor.js:10640)  
    at vendor.js:11265  
    at HTMLButtonElement.<anonymous> (vendor.js:40134)  
    at t.invokeTask (polyfills.js:3)

home.html:

<ion-header>  
    <ion-navbar>  
        <button ion-button menuToggle>  
            <ion-icon name="menu"></ion-icon>  
        </button>  
        <ion-title>Screen Orientation</ion-title>  
    </ion-navbar>  
</ion-header>  

<ion-content padding>  
    <button ion-button clear block secondary (click)="getCurrentScreenOrientation()"> Get Orientation </button>  

    <button ion-button clear block secondary (click)="observeScreenOrientation()"> Observe Orientation </button>  
</ion-content>

home.ts:

import { Component } from '@angular/core';  
import { NavController } from 'ionic-angular';  
import { ScreenOrientation } from '@ionic-native/screen-orientation/ngx';  

@Component({  
    selector: 'page-home',  
    templateUrl: 'home.html'  
})  
export class HomePage {  

    constructor(public navCtrl: NavController, private screenOrientation: ScreenOrientation) {
    }


    getCurrentScreenOrientation() {  
        console.log('getCurrentScreenOrientation: ', this.screenOrientation.type);  
    }  


    observeScreenOrientation() {  
        this.screenOrientation.onChange()
    .subscribe(() => console.log('Orientation Changed'));
    }  

}

Answer 1

/ngx 扩展适用于 ionic 4 以后的版本，它不适用于 ionic 3 并且会抛出

TypeError: Object(...) is not a function

所以我建议你使用 V3 文档并为 ionic 3 项目实现它 https://ionicframework.com/docs/v3/native/screen-orientation/

由于 ionic 3 未检测到内置的 onchange 函数，因此如何在 ionic 3 中实现最新的屏幕方向？

How to implement the latest screen orientation in ionic 3 as it doesn't detect the inbuilt onchange function?

screen-orientation

ionic-framework