Ionic3中如何实现点击按钮后显示另一个按钮

嘿，这个需求实现起来超简单，我给你分步骤捋清楚怎么做：

1. 在组件类中添加控制变量与触发方法 #

首先在你的页面组件（比如your-page.ts）里定义一个布尔变量，用来控制save按钮的显示状态，再写一个点击触发的方法：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-your-page',
  templateUrl: 'your-page.html'
})
export class YourPage {
  // 初始设为false，让save按钮默认隐藏
  isSaveBtnVisible: boolean = false;

  constructor(public navCtrl: NavController) {}

  // 点击click here按钮时调用这个方法，切换显示状态
  toggleSaveBtn() {
    this.isSaveBtnVisible = true;
  }

  // 可选：save按钮的点击逻辑
  onSave() {
    // 这里写你的保存逻辑，比如调用API、存储数据等
    console.log('保存操作触发');
  }
}

2. 在模板中编写按钮与显示控制逻辑 #

接着在对应的HTML模板（your-page.html）里，用Ionic的*ngIf指令来控制save按钮的显示，同时给click here按钮绑定点击事件：

<!-- 初始显示的click here按钮 -->
<button ion-button color="primary" (click)="toggleSaveBtn()">click here</button>

<!-- 初始隐藏的save按钮，当isSaveBtnVisible为true时显示 -->
<button ion-button color="secondary" *ngIf="isSaveBtnVisible" (click)="onSave()">save</button>

小提示 #

• *ngIf会直接在DOM中添加/移除元素，相比[hidden]（只是设置display:none）更节省资源，适合这种只需要切换一次显示的场景
• 如果想让交互更流畅，可以结合Ionic的Animation模块，给save按钮加上淡入或者滑入的显示动画

内容的提问来源于stack exchange，提问作者vignesh