#android #angular #typescript #mobile
#Android #angular #typescript #Мобильный
Вопрос:
У меня есть приложение angular, в котором я вижу странную проблему с компонентом меню на моем телефоне Samsung S20 (похоже, он отлично работает в настольном Chrome). Когда я фокусирую поле ввода на PicksComponent, а затем нажимаю кнопку «Мой гамбургер», чтобы переключить мое меню, оно появляется на секунду, затем исчезает и отменяет выбор моего поля ввода. Когда я снова нажимаю кнопку гамбургера, она работает нормально. MenuComponent не должен каким-либо образом взаимодействовать с PicksComponent, поэтому я понятия не имею, что происходит.
app-component.html
<main id="container">
<div class='banner'>websitename</div>
<app-menu></app-menu>
<div id="routerOutlet">
<router-outlet></router-outlet>
</div>
</main>
menu-component.ts
import { Component, OnInit } from '@angular/core';
import { Router } from "@angular/router";
import { ManageLoginService } from "../manage-login.service";
@Component({
selector: 'app-menu',
templateUrl: './menu.component.html',
styleUrls: ['./menu.component.css']
})
export class MenuComponent implements OnInit {
constructor(private router: Router,private manageLoginService : ManageLoginService) { }
mobileWidth: number = 500;
screenWidth: number = window.innerWidth;
displayMenuItems: boolean = false;
loggedIn : boolean = false;
logout() {
localStorage.clear();
this.router.navigateByUrl("/login");
}
checkMenu() {
this.screenWidth = window.innerWidth;
if(this.screenWidth > this.mobileWidth) {
this.displayMenuItems = true;
}
else {
this.displayMenuItems = false;
}
}
toggleMenu() {
this.displayMenuItems = !this.displayMenuItems;
}
ngOnInit() {
this.checkMenu();
this.manageLoginService.isUserLoggedIn.subscribe(loggedInStatus => this.loggedIn = loggedInStatus)
}
}
</ul>
выбирает-component.ts
import { Component, OnInit,ViewChild,ElementRef} from '@angular/core';
import { Router } from "@angular/router";
import { DataService } from "../data.service";
@Component({
selector: 'app-picks',
templateUrl: './picks.component.html',
styleUrls: ['./picks.component.css'],
})
export class PicksComponent implements OnInit {
constructor(private dataService : DataService,private router: Router) { }
@ViewChild("playerOne",{static:false}) playerOneField: ElementRef;
@ViewChild("playerTwo",{static:false}) playerTwoField: ElementRef;
@ViewChild("playerThree",{static:false}) playerThreeField: ElementRef;
@ViewChild("playerFour",{static:false}) playerFourField: ElementRef;
@ViewChild("playerFive",{static:false}) playerFiveField: ElementRef;
title: string = 'Submit Picks';
suggestions : any = {"playerOne":[],"playerTwo":[],"playerThree":[],"playerFour":[],"playerFive":[]};
picks : any = {"playerOne":"","playerTwo":"","playerThree":"","playerFour":"","playerFive":""};
picksForm : any = {"token":"","players":this.picks};
enableSuggestions: boolean = true;
formResponse : any;
formValid : boolean = true;
formErrors : string;
keys : any;
picksSubmitted : boolean = false;
focus(elementName : any): void {
this[elementName].nativeElement.focus();
}
displayPlayers(player :any) {
console.log("HMM");
localStorage.setItem("picks",JSON.stringify(this.picks));
if(this.picks[player].length >= 3 amp;amp; this.enableSuggestions) {
this.dataService.getSuggestions(this.picks[player]).subscribe(suggestions => this.suggestions[player] = suggestions);
}
else {
this.enableSuggestions = true;
this.suggestions[player] = [];
}
}
submitForm(form :any) {
if(this.validateForm()) {
this.picksForm.token = localStorage.getItem("token");
this.dataService.sendEmail(form).subscribe(formResponse => this.processResponse(formResponse));
}
else {
this.formValid = false;
}
}
processResponse(response :any) {
this.formResponse = response;
if(this.formResponse.error) {
this.formValid = false;
this.formErrors = this.formResponse.message;
}
else {
localStorage.removeItem("picks");
this.picksSubmitted = true;
}
}
select(suggestion : any,player :any) {
this.enableSuggestions = false;
this.picks[player] = suggestion.forename " " suggestion.surname;
this.suggestions[player] = [];
localStorage.setItem("picks",JSON.stringify(this.picks));
}
resetForm() {
this.picks.playerOne = "";
this.picks.playerTwo = "";
this.picks.playerThree = "";
this.picks.playerFour = "";
this.picks.playerFive = "";
}
hideSuggestions() {
this.suggestions.playerOne = [];
this.suggestions.playerTwo = [];
this.suggestions.playerThree = [];
this.suggestions.playerFour = [];
this.suggestions.playerFive = [];
}
validateForm() : boolean {
// Create array from object
this.keys = Object.values(this.picks);
// Iterate over array
for(const key of this.keys) {
if(key.length < 2) {
this.formErrors = "Please do not leave any picks blank.";
return false;
}
}
return true;
}
ngOnInit() {
if(localStorage.getItem("picks")) {
this.picks = JSON.parse(localStorage.getItem("picks"));
this.picksForm = {"token":"","players":this.picks};
}
setTimeout (() => { this.hideSuggestions(); }, 1000);
}
}
У кого-нибудь есть идеи, что может быть причиной этого? Пожалуйста, дайте мне знать, если вам потребуется больше моего кода, чтобы помочь. Не уверен, есть ли какая-то проблема с мобильным Chrome или я допустил ошибку, поскольку я все еще новичок в Angular.
Комментарии:
1. Я предлагаю использовать мобильное моделирование в Chrome, чтобы убедиться, что ваши мобильные устройства работают, прежде чем тестировать их на телефоне. В верхнем левом углу консоли разработчика есть кнопка «переключить панель инструментов устройства».
2. Да, я там много тестировал, и, похоже, это работает без проблем.
3. Найден более простой способ локальной отладки с использованием AVD, и, похоже, это все мобильный Chrome, а не только мой S20. Похоже, это связано с событием onBlur, но я не уверен, как это вызывает такое поведение.
4. Я говорю неправду, это связано с событием изменения размера. Похоже, с ним связано событие GlobalZoneAwareCallback.
Ответ №1:
В компоненте меню была привязка window: resize, которая срабатывала при появлении или исчезновении клавиатуры на мобильном устройстве, что приводило к изменению высоты окна. Я изменил метод, чтобы он срабатывал только при изменении ширины, и это исправило его.