Web开发学习笔记:Ionic4中ion-button点击事件无反应

纯粹的记录一下自己遇见的问题,大家不一定会遇见

我创建了一个blank类型的Ionic4项目,然后自己添加了一些ion-button准备测试一下按钮跳转页面,但是当我在对应的HTML中绑定好按钮事件;在对应的ts文件中写好方法之后,调试时点击按钮居然没有反应

下面是一开始的HTML页面代码

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>
      我的APP
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>

  <div class="ion-padding">
    <ion-button color="primary" size="large" (click)="btnClick('普通按钮')">
      <ion-icon name="star"></ion-icon>
      <ion-label>点击测试</ion-label>
    </ion-button>
    <ion-fab>
      <ion-fab-button color="primary" (click)="btnClick('悬浮按钮')">悬浮按钮</ion-fab-button>
    </ion-fab>
  </div>

</ion-content>
<ion-tabs>
      <ion-tab-bar slot="bottom">
        <ion-tab-button tab="home">
          <ion-icon name="home"></ion-icon>
          <ion-label>首页</ion-label>
        </ion-tab-button>
        <ion-tab-button tab="money">
          <ion-icon name="grid"></ion-icon>
          <ion-label>记账</ion-label>
        </ion-tab-button>
        <ion-tab-button tab="person">
          <ion-icon name="person"></ion-icon>
          <ion-label>我的</ion-label>
        </ion-tab-button>
      </ion-tab-bar>
    </ion-tabs>

然后下面是对应的ts文件代码

import { Component } from '@angular/core';
import { NavController } from '@ionic/angular';
import { AlertController } from '@ionic/angular';//导入弹框
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  
  //构造函数
  constructor(
    public nav:NavController,//初始化变量
    ) { 
    console.log("这是构造函数");

  }
  
  btnClick(data){
    
    console.log(data+"触发btnClick事件");
    this.nav.navigateForward('/money');
  };
  onClick(){
    console.log("触发按钮点击事件");
    // this.nav.navigateForward("/money")
  }
}

 

就上面这种情况,死点按钮毫无反应;后来经过高人指点思路自己摸索发现了问题

<ion-tabs>
      <ion-tab-bar slot="bottom">
        <ion-tab-button tab="home">
          <ion-icon name="home"></ion-icon>
          <ion-label>首页</ion-label>
        </ion-tab-button>
        <ion-tab-button tab="money">
          <ion-icon name="grid"></ion-icon>
          <ion-label>记账</ion-label>
        </ion-tab-button>
        <ion-tab-button tab="person">
          <ion-icon name="person"></ion-icon>
          <ion-label>我的</ion-label>
        </ion-tab-button>
      </ion-tab-bar>
    </ion-tabs>

就这段代码,就是它影响了button的发挥(个人感觉是这样直接写在content后面是不是会层级比content中的标签高,所以就跟覆盖了一样导致button点击没有反应),后来就把这段代码用<ion-footer>套住之后问题解决

<ion-footer>
  <ion-toolbar color="primary">
    <ion-tabs>
      <ion-tab-bar slot="bottom">
        <ion-tab-button tab="home">
          <ion-icon name="home"></ion-icon>
          <ion-label>首页</ion-label>
        </ion-tab-button>
        <ion-tab-button tab="money">
          <ion-icon name="grid"></ion-icon>
          <ion-label>记账</ion-label>
        </ion-tab-button>
        <ion-tab-button tab="person">
          <ion-icon name="person"></ion-icon>
          <ion-label>我的</ion-label>
        </ion-tab-button>
      </ion-tab-bar>
    </ion-tabs>
  </ion-toolbar>

</ion-footer>