角を使ってモバイル上でクリック機能を削除

Question

ナビゲーションがあり、特定のリンクをクリックすると別のウェブページに移動します。

<ul class="nav-list"> 
    <li class="mobile-homepage"><a (click)="selectPage('homepage')">{{'NAVIGATION_HOMEPAGE'|translate}}</a></li> 
    <li><a (click)="selectPage('solutions')" class="main-links separate">{{'NAVIGATION_SOLUTIONS'|translate}}</a> 
     <ul class="nav-dropdown set-width"> 
      <li><a (click)="selectPage('solutions', 'collect')" >{{'NAVIGATION_CLICK_COLLECT'|translate}}</a></li> 
      <li><a (click)="selectPage('solutions', 'returns')">{{'NAVIGATION_STORE_RETURNS'|translate}}</a></li> 
      <li><a (click)="selectPage('solutions', 'aisle')" >{{'NAVIGATION_ENDLESS_AISLE'|translate}}</a></li> 
      <li><a (click)="selectPage('solutions', 'store')" >{{'NAVIGATION_STORE_FULFILMENT'|translate}}</a></li> 
      <li><a (click)="selectPage('solutions', 'customer')" >{{'NAVIGATION_CUSTOMER_CARE'|translate}}</a></li> 
      <li><a (click)="selectPage('solutions', 'partner')" >{{'NAVIGATION_PARTNER_FULFILMENT'|translate}}</a></li> 
     </ul> 
    </li> 
</ul> 

はあなたが私はしばらくの間、モバイル上でそのリンクを無効にしたい、(click)="selectPage('solutions') 私の問題があり、第二のLiにクリックイベントを見ることができます：ここに私のコードです。ドロップダウンメニューも開きますので、完全に無効にする必要はありません。モバイルでは、そのリンクをクリックするとドロップダウンメニューだけが開き、新しいデスクトップのようなページ。

jQueryを使用してこれを行う方法を知っている人はいますか？

Answer 1

簡単な解決策は、リンクを複製し、media queriesでCSSで表示するかどうかを指定することです。

<li class="desktop"><a (click)="selectPage('solutions', 'collect')" > 
<li class="mobile"><a (click)="selectMobilePage('solutions', 'collect')" > 

他のソリューションは、selectPage関数内screen sizeをチェックするために、次のようになります。

if(window.innerWidth >= xxx) { ... } 

より良い解決策は、モバイル上のかどうか、イベントのサイズを変更し、ブール値を返すように耳を傾けますサービスを作成することですない。

擬似コード：

@Injectable() 
export class ScreenService { 

    public resize$; 

    constructor() { 
    this.resize$ = new BehaviorSubject<null>(null); 
    Observable.fromEvent(window, 'resize').subscribe(() => this.onResize()); 
    } 

    private onResize() { 
    this.setSize(); 
    this.resize$.next(); 
    } 

    private setSize() { 
    this.screenHeight = window.innerHeight; 
    this.screenWidth = window.innerWidth; 
    } 

    isMobile() { 
    return this.screenWidth >= xxx; // your choice 
    } 

} 

Answer 2

あなたはこれにより、ユーザは、モバイル上にあるかどうかをチェックできるようになる。このまたは類似のlib（他の周りの名前の気圧を思い出すカント見アイブ） https://www.npmjs.com/package/ng2-device-detector

を使用することができますまたは他のどのデバイスであってもよい。

それとも、私は同様の問題で何をしたか行うことができ、画面の幅を検出し、そのようにそれに応じて調整するフレキシボックスを使用します。

<mat-toolbar class="fixed-navbar mat-elevation-z6" color="accent"> 

     <button mat-button (click)="sidenav.open()" fxHide="false" fxHide.gt-lg> 
     <mat-icon>menu</mat-icon> 
     </button> 
     <div fxLayout> 
     <button mat-button routerLink="/"><div class="title">{{title}}</div></button> 
     </div> 

     <div fxFlex="grow"></div> 
     <div style="padding-right: 20px;"> 
     <div fxLayout fxShow="false" fxShow.gt-lg> 
      <button mat-button [mat-menu-trigger-for]="infoMenu"><span>Information</span></button> 
      <button mat-button [mat-menu-trigger-for]="toolsMenu"><span>Tools</span></button> 
      <button mat-button [mat-menu-trigger-for]="userMenu"><span>User</span></button> 
      <button mat-icon-button [mat-menu-trigger-for]="colors"><mat-icon>format_color_fill</mat-icon></button> 
     </div> 
     </div> 
    </mat-toolbar> 

これが適切にあなたがここに見ることができます表示するには：

https://github.com/kenji-1996/CallumTech/blob/master/src/app/component/navbar/navbar.component.html

を