Android 三星手机的怪异角度问题

我有一个angular应用程序，我看到我的三星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>

网站名

菜单组件

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>

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 && 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);
  }
}

从'@angular/core'导入{Component，OnInit}；
从“@angular/Router”导入{Router}”；
从“./manage login.service”导入{managelogin服务}；
@组成部分({
选择器：“应用程序菜单”，
templateUrl:'./menu.component.html'，
样式URL:['./menu.component.css']
})
导出类MenuComponent实现OnInit{
构造函数（专用路由器：路由器，专用manageLoginService:manageLoginService）{}
移动宽度：编号=500；
屏幕宽度：number=window.innerWidth；
displayMenuItems:boolean=false；
loggedIn:boolean=false；
注销（）{
localStorage.clear（）；
this.router.navigateByUrl（“/login”）；
}
检查菜单（）{
this.screenWidth=window.innerWidth；
如果（this.screenWidth>this.mobileWidth）{
this.displayMenuItems=true；
}
否则{
this.displayMenuItems=false；
}
}
切换菜单（）{
this.displayMenuItems=！this.displayMenuItems；
}
恩戈尼尼特（）{
这是checkMenu（）；
this.manageLoginService.isUserLoggedIn.subscribe（loggedInStatus=>this.loggedIn=loggedInStatus）
}
}

电子元件

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>

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 && 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);
  }
}

从'@angular/core'导入{Component，OnInit，ViewChild，ElementRef}；
从“@angular/Router”导入{Router}”；
从“./data.service”导入{DataService}；
@组成部分({
选择器：“应用程序拾取”，
templateUrl:“./picks.component.html”，
样式URL:['./picks.component.css']，
})
导出类PicksComponent实现OnInit{
构造函数（私有数据服务：数据服务，私有路由器：路由器）{}
@ViewChild（“playerne”，{static:false}）playernefield: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；
标题：string='submitpicks'；
建议：任意={“playerOne”：[]，“playerTwo”：[]，“playerThree”：[]，“playerFour”：[]，“playerFive”：[]；
拾取：any={“playerOne”：“playerTwo”：“playerThree”：“playerFour”：“playerFive”：“}；
picksForm:any={“token”：“”“players”：this.picks}；
enableSuggestions:boolean=true；
答复：任何；
formValid:boolean=true；
formErrors：字符串；
钥匙：任何；
picksSubmitted:boolean=false；
焦点（元素名称：任意）：无效{
此[elementName].nativeElement.focus（）；
}
显示播放器（播放器：任意）{
console.log（“HMM”）；
setItem（“picks”，JSON.stringify（this.picks））；
if（this.picks[player].length>=3&&this.enableSuggestions）{
this.dataService.getSuggestions（this.picks[player]）.subscribe（suggestions=>this.suggestions[player]=建议）；
}
否则{
this.enableSuggestions=true；
此。建议[玩家]=[]；
}
}
提交表格（表格：任何）{
if（this.validateForm（））{
this.picksForm.token=localStorage.getItem（“token”）；
this.dataService.sendmail（form.subscribe）（formResponse=>this.processResponse（formResponse））；
}
否则{
this.formValid=false；
}
}
processResponse（响应：任意）{
this.formResponse=响应；
if（this.formResponse.error）{
this.formValid=false；
this.formErrors=this.formResponse.message；
}
否则{
localStorage.removietem（“picks”）；
this.picksubmitt=true；
}
}
选择（建议：任意，玩家：任意）{
this.enableSuggestions=false；
this.picks[player]=suggestion.forename+“”+suggestion.name；
此。建议[玩家]=[]；
setItem（“picks”，JSON.stringify（this.picks））；
}
重置表单（）{
this.picks.playerOne=“”；
this.picks.playerTwo=“”；
this.picks.playerThree=“”；
this.picks.playerFour=“”；
this.picks.playerFive=“”；
}
隐藏建议（）{
this.suggestions.playerOne=[]；
this.suggestions.playerTwo=[]；
this.suggestions.playerThree=[]；
this.suggestions.playerFour=[]；
this.suggestions.playerFive=[]；
}
validateForm（）：布尔值{
//从对象创建数组
this.keys=Object.values（this.picks）；
//迭代数组
for（此.keys的常量键）{
如果（键长度<2）{
this.formErrors=“请不要将任何选择留空。”；
返回false；
}
}
返回true；
}
恩戈尼尼特（）{
if（localStorage.getItem（“picks”））{
this.picks=JSON.parse（localStorage.getItem（“picks”）；
this.picksForm={“token”：“”“players”：this.picks}；
}
setTimeout（（）=>{this.hideSuggestions（）；}，1000）；
}
}

---

有人知道这是什么原因吗？如果您还需要我的代码来帮助，请告诉我。不确定mobile chrome是否有问题，或者我是否犯了错误，因为我对Angular还是相当陌生。

菜单组件中有一个窗口：调整大小绑定，当键盘在mobile上出现或消失导致窗口高度改变时触发该绑定。我修改了该方法，使其仅在宽度改变时触发，并将其修复。

我建议在手机上测试之前，使用Chrome中的移动模拟来确保移动设备正常工作。它位于开发人员控制台的左上角，有一个“切换设备工具栏”按钮。是的，我在那里进行了广泛的测试，它似乎可以正常工作。Fo