Question

我正在使用Ionic 3和Angular 4来开发应用程序，我的主页有两个侧面菜单，每个菜单中都有一些选项和按钮，一个侧面菜单有一个按钮，用于显示离子列表中的结果-牌。但是当我尝试将按钮放在视图中的任何位置（除了标题或菜单内部）时，它们不可单击并且不会导致（单击）事件被触发。我已将其追溯到我添加到我的标签中的标签，以使菜单弹出。如果我删除新的离子导航标签，则按钮可以点击，但菜单不起作用。以下是显示我所做的最少量的代码。

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

我弄清楚我的代码出了什么问题。我有一大堆代码和其他所有代码，为了解决我的问题，我只需将它移到标签上方就可以了！

<ion-nav>标签导致按钮无法在页面上点击

1 个答案: