Блог

У меня есть приложение 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.

В компоненте меню была привязка window: resize, которая срабатывала при появлении или исчезновении клавиатуры на мобильном устройстве, что приводило к изменению высоты окна. Я изменил метод, чтобы он срабатывал только при изменении ширины, и это исправило его.