<ion-nav>ボタンでページをクリックできないようにする

Question

私はIonic 3とAngular 4を使って今すぐアプリケーションを開発しています.2つのサイドメニューにはいくつかのオプションとボタンがあります。イオンカードのイオンリストに結果を表示する。しかし、（ヘッダーやメニューの内側以外の）ビューのどこにでもボタンを置いてみると、クリックできず、（クリック）イベントが発生しません。私はタグを開いてポップアップさせるためにタグに追加したタグまで追跡しました。新しいion-navタグを削除すると、ボタンはクリック可能ですがメニューは機能しません。以下は、私が行ったことを示す最小限のコードです。

home.html

<ion-header> 
    <ion-navbar style="text-align: center"> 

    <ion-buttons left> 
     <button ion-button icon-only item-left (click)="toggleSettings()"> 
     <ion-icon name="menu"></ion-icon> 
     </button> 
    </ion-buttons> 

    <ion-title> 
     Battles 
    </ion-title> 

    <ion-buttons end> 
     <button ion-button icon-only item-right (click)="toggleFilter()"> 
     <ion-icon name="search"></ion-icon> 
     </button> 
    </ion-buttons> 

    </ion-navbar> 
</ion-header> 

<ion-content class="home" overflow-scroll="true"> 

    <ion-list [virtualScroll]="battles"> 

    <ion-card *virtualItem="let battle" (click)="openDetails(battle)"> 

     <ion-item> 
     <button ion-button (click)="openDetails()">Details</button> 
     </ion-item> 

     <ion-card-content> 
     </ion-card-content> 

     <ion-row responsive-sm wrap> 

     </ion-row> 

     <ion-row> 

     </ion-row> 

    </ion-card> 
    </ion-list> 

    <ion-menu [content]="nav" id="settings" side="left"> 
    <ion-content> 
     <ion-list> 
     <button ion-item (click)="logOut()">Log Out</button> 
     </ion-list> 
    </ion-content> 
    </ion-menu> 

    <ion-menu [content]="nav" id="filter" side="right"> 
    <ion-content> 
     <ion-item> 
      <button ion-button (click)="loadItems()">Search</button> 
     </ion-item> 
     </ion-list> 
    </ion-content> 
    </ion-menu> 

    <ion-nav #nav [root]="rootPage"></ion-nav> 
</ion-content> 

app.html

<ion-nav #nav [root]="rootPage"></ion-nav> 

私はそれがナビゲーションバーの範囲とは何かを持っていると確信していますが、私は仕事にボタンを取得する方法がわかりませんよ自分のイオンリスト内で、home.htmlページでこれらのメニューを開くこともできます。

Answer 1

私のコードで何が間違っているのか分かりました。私は他のすべてのものと一緒にコードのチャンクを持っていました。私がしなければならなかったことは、タグの上に移動することでした！