0

Estoy desarrollando una app pero al momento de abrirla no me detecta en que orientación está y me pone tres botones que tengo abajo con las clases como si fueran ladscape, tengo un método que se supone que debe de detectarla y lo llamo pero nada pasa, este es mi código:

import { ScreenOrientation } from '@ionic-native/screen-orientation/ngx';
import { EventoDespacho } from './../../models/evento-despacho';
import { Component, OnInit } from '@angular/core';
import { StatusBarStyleService } from '../../utils/status-bar-style.service';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { Platform } from '@ionic/angular';
import { Subscription } from 'rxjs';
import { DespachoService } from 'src/app/api/despacho.service';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss']
})
export class HomePage implements OnInit {
  isVertical: boolean;
  ngClasses: any;
  ngClassesButtonsCont: any;
  ngClassesButton: any;
  ngClassesSlider: any;
  imgServicios: string;
  imgTramites: string;
  imgLimpia: string;
  staticThis = this;
  backButtonSubscription: Subscription;
  titulo = 'Servicios Capital';

  constructor(
    private statusBarStyle: StatusBarStyleService,
    private statusBar: StatusBar,
    private platform: Platform,
    private screenOrientation: ScreenOrientation
  ) {}

  ngOnInit(): void {
    console.log('Home ngOnInit');
  }

  ionViewDidLoad() {
    this.addEventListeners();
    this.statusBarStyle.setDarkStatusBar(this.statusBar);
    this.isVertical = true;
    this.ngClasses = {};
    this.ngClassesButtonsCont = {};
    this.ngClassesButton = {};
    this.ngClassesSlider = {};
    this.imgServicios = '';
    this.imgTramites = '';
    this.imgLimpia = '';
    this.onOrientationChange(null); 
  }

  ionViewDidLeave() {
    this.removeEventListeners();
  }

  /**
   * Atiende el evento cuando se presiona el backbutton del dispositivo.
   */
  onBackButtonClick() {
    navigator['app'].exitApp();
  }

  /**
   * Agrega los listeners de esta página.
   */
  addEventListeners() {
    window.addEventListener('orientationchange', this.onOrientationChange);
    this.backButtonSubscription = this.platform.backButton.subscribe(
      this.onBackButtonClick
    );
  }

  /**
   * Remueve los listeners que pertenecen a esta página para evitar duplicidad.
   */
  removeEventListeners() {
    window.removeEventListener('orientationchange', this.onOrientationChange);
    this.backButtonSubscription.unsubscribe();
  }

  /**
   * Realiza cambios en íconos y clases de la pantalla al girar la pantalla.
   */
  onOrientationChange = event => {
    const orientation = screen.orientation.type.toString();

    this.isVertical = orientation.indexOf('portrait') >= 0;

    this.ngClasses = {
      'flex-c-col': this.isVertical,
      'flex-container-row': !this.isVertical
    };

    this.ngClassesButtonsCont = {
      'flex-container-row h-100': this.isVertical,
      'flex-c-col m-l-10': !this.isVertical
    };

    this.ngClassesButton = {
      'h-100': this.isVertical
    };

    this.ngClassesSlider = {
      'mw-50': !this.isVertical
    };

    if (this.isVertical) {
      this.imgServicios = '../../assets/images/BotonServiciosVertical.png';
      this.imgTramites = '../../assets/images/BotonTramitesVertical.png';
      this.imgLimpia = '../../assets/images/BotonLimpiaVertical.png';
    } else {
      this.imgServicios = '../../assets/images/BotonServicios.png';
      this.imgTramites = '../../assets/images/BotonTramites.png';
      this.imgLimpia = '../../assets/images/BotonLimpia.png';
    }
  }
}

Ya traté de "bloquear" la orientación con this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.PORTRAIT_PRIMARY); pero esto tampoco funcionó. Una cosa que noté es que los eventos ngOnInit y ionViewDidLoad no están siendo llamados al momento de que la vista se carga cuando abro la aplicación y para hacerlos funcionar tengo que entrar a otra vista y regresarme a la primera y ahí es cuando ya detecta el cambio y me ajusta los estilos a los que debe de ser, ¿a alguien más le ha pasado esto que me pueda ayudar? Ah y también esto solo me pasa en iOS, android funciona normalmente pero no tengo idea de por qué.

1 respuesta 1

0

Tienes que cambiar la configuración en el config.xml, añadiendo el tag específico para la orientación en dispositivos móviles. No recuerdo cuál es el tag específico, pero lo encontrarás fácilmente. Yo lo utilicé hace algunos años y eso solucionó el problema

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.