Ionic 4 - 屏幕方向（横向）不起作用

Question

我是 Ionic 4 的新手，我正在尝试将屏幕方向设置为横向并参考文档，这就是我正在做的事情：

...
import {ScreenOrientation} from '@ionic-native/screen-orientation';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent {

  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private screenOrientation: ScreenOrientation,
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.screenOrientation.lock(ScreenOrientation.ORIENTATIONS.LANDSCAPE);
    ...
  }
}

在编译过程中，我得到这个错误：

[ng] ERROR in src/app/app.component.ts(24,33): error TS2345: Argument of type 'string' is not assignable to parameter of type 'OrientationLockType'.

在浏览器控制台上：

Uncaught Error: Can't resolve all parameters for AppComponent: ([object Object], [object Object], [object Object], ?). at syntaxError (compiler.js:2426) [] ...

Answer 1

第四个参数注入有问题，您是否正确安装了屏幕方向插件？

ionic cordova plugin add cordova-plugin-screen-orientation
npm install @ionic-native/screen-orientation

https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-screen-orientation/

如果这不起作用，您应该尝试这种方式（没有导入和注入）

cordova plugin add cordova-plugin-screen-orientation

https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-screen-orientation/

此外，如果您想为整个应用程序强制横向，可以在 config.xml

中添加首选项

<preference name="orientation" value="landscape" />

我已经测试过了，它可以在 android 平台 7.1.4

中运行

Answer 2

您使用 ionic V4，请查看文档，导入正确的内容。

import { ScreenOrientation } from '@ionic-native/screen-orientation/ngx';

不是

import {ScreenOrientation} from '@ionic-native/screen-orientation';

Answer 3

确保使用插件将 ScreenOrientation 添加到模块中的提供程序数组。

例如 app.module.ts

Answer 4

使用插件的模块中的提供程序数组。

    providers: [
    ScreenOrientation
 ]

Answer 5

这对我有用 (Ionic 5)。在你的 page.module 中，导入依赖项：

import { ScreenOrientation } from '@ionic-native/screen-orientation/ngx';

并提供给模块：

 providers: [
    ScreenOrientation, 
    ...]

Ionic 4 - 屏幕方向（横向）不起作用

Ionic 4 - Screen Orientation(landscape) does not work

screen-orientation

cordova

ionic4