Как удается открыть меню с помощью клика для мобильного телефона и наведения на рабочий стол

Question

Я использую Angular 9, как мне удается открыть меню, щелкнув по Mobile и навести курсор на рабочий стол?

Например, если у меня есть список предметов, я хочу открыть меню при наведении мыши, когда размер рабочего стола, и мне это удается с помощью «наведения», но когда у меня есть мобильный телефон, я хочу открыть меню одним нажатием, учитывая, что у меня более одной кнопки, поэтому я не хочу иметь две разные кнопки для управления действиями С уважением

Answer 1

Я думаю, что самый простой и быстрый способ - реализовать медиа-запрос css, но это то, что вам не нужно. Затем вы можете создать сервис, который управляет точками останова и использовать его там, где вам это нужно. Было бы что-то похожее на это:

import { Injectable } from '@angular/core';
import { BreakpointObserver, BreakpointState, Breakpoints } from '@angular/cdk/layout';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class BreakpointsService {

  isMobile: Subject<boolean> = new Subject();

  constructor(
    private breakpointObserver: BreakpointObserver,
  ) {
    this.breakpointObserver
    .observe([
      Breakpoints.XSmall
    ])
    .subscribe((state: BreakpointState) => {
      if (state.matches) {
        // console.log('isMobile');
        this.isMobile.next(true);
      } else {
        // console.log('not isMobile');
        this.isMobile.next(false);
      }
    });
  }

  isMobile$() {
    return this.isMobile.asObservable();
  }

  isMatchedMobile() {
    const rta = this.breakpointObserver.isMatched([Breakpoints.XSmall]);
    this.isMobile.next(rta);
  }


}

А в твоих компонентах используйте вот так:

this.breakpointsService.isMobile$()
  .pipe(
    takeUntil(this.unsubscribe$)
  )
  .subscribe(value => {
    this.isMobile = value;
  });

Answer 2

В качестве обходного пути вы можете проверить, является ли пользователь мобильным или настольным компьютером, а затем применить запрошенную функциональность к каждому из них.

Используйте хук ngOnInit на своем компоненте для проверки :

ngOnInit(): void {
  if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)){
    // Logic for mobile users using on click
  } else {
    // Logic for desktop users using on hover
  }
}

Надеюсь, это поможет.