如何在Angular 5中实现点击按钮后隐藏按钮并原地显示确认提示？

嘿，我看了你这段代码，已经有了实现确认交互的雏形啦，不过还需要调整逻辑来完美达成需求。咱们来一步步修改：

首先调整模板部分，用一个状态变量来切换按钮和确认提示的显示：

<!-- 按钮仅在不需要确认时显示 -->
<button type="button" class="btn btn-primary" *ngIf="!showConfirm" (click)="showConfirm = true">Click</button>

<!-- 确认提示仅在需要确认时显示 -->
<div *ngIf="showConfirm">
  <small>Are you sure?</small>
  <a href="javascript:void(0)" (click)="onConfirmYes()">Yes</a> / 
  <a href="javascript:void(0)" (click)="onConfirmNo()">No</a>
</div>

在组件类里补充状态变量和处理逻辑：

import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component', // 记得替换成你实际的组件选择器
  templateUrl: './your-component.component.html', // 替换成你的模板路径
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  // 控制确认框的显示状态，初始为false（显示按钮）
  showConfirm = false;

  // 点击「Yes」后的处理逻辑
  onConfirmYes() {
    // 这里写你要执行的后续操作，比如提交数据、发送API请求等
    console.log('开始执行后续操作...');
    // 如果操作完成后需要隐藏确认框，可添加：this.showConfirm = false;
  }

  // 点击「No」后的处理逻辑：恢复显示原按钮
  onConfirmNo() {
    this.showConfirm = false;
  }
}

• 用showConfirm这个语义化的布尔变量来控制显示切换，比原来的isValid更清晰
• 给Yes/No的链接添加javascript:void(0)避免页面跳转，同时绑定点击事件处理逻辑
• 拆分了操作逻辑，让确认和取消的处理更模块化，后续维护也更方便

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