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é.