Ionic 5 - 锁定屏幕方向以适用于将在Android/iOS上运行的Ionic/Capacitor应用程序

Question

我正在尝试找出如何锁定整个应用程序的屏幕方向，因此当它部署到Android / iOS时，它仅在纵向模式下使用。

我看到有很多问题使用Cordova和config.xml进行问答。但是我正在使用Capacitor，所以不同的是我没有config.xml文件。相反，我有一个ionic.config.json文件。

这是我在app.module.ts和app.component.ts中目前拥有的内容：

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { RouteReuseStrategy } from '@angular/router';
    
    import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
    
    import { AppComponent } from './app.component';
    import { AppRoutingModule } from './app-routing.module';
    import {ScreenOrientation} from "@ionic-native/screen-orientation/ngx";
    
    
    @NgModule({
      declarations: [AppComponent],
      entryComponents: [],
      imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
      providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }, ScreenOrientation],
      bootstrap: [AppComponent],
    })
    export class AppModule {
      constructor() {
    
      }
    
    }

And

export class AppComponent {
  constructor(private screenOrientation: ScreenOrientation) {
    this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.PORTRAIT);
  }

}

但我不相信这会真正锁定整个应用程序的屏幕方向。我尝试查看Ionic文档，但它非常简陋。

- Donny groezinger

---

请查看此链接 https://capacitorjs.com/docs/cordova/migrating-from-cordova-to-capacitor#cordova-plugin-preferences （在 Cordova 中是 <preference name="Orientation" value="landscape" />，因此在链接对象的属性中添加 Orientation: "portrait"），但不确定是否有效，您可以测试一下，这是一个快速检查的方法，或者使用 https://ionicframework.com/docs/native/screen-orientation ，并将锁定方法设置在 app.component.ts 中以影响整个应用程序，而不是在页面内部，除非您需要为单个或特定页面启用此功能... - Mostafa Harb

Answer 1

你需要将orientation参数传递给screenOrientation.lock方法。

类似这样：

export class AppComponent {
  constructor(private screenOrientation: ScreenOrientation) {
    this.screenOrientation.lock('portrait');
  }
}

参考自: https://github.com/apache/cordova-plugin-screen-orientation

- Vishal Srivastava