Angular 5：点击按钮触发显示新按钮的实现方法求助

嘿，这个需求其实用Angular的*ngIf指令就能轻松搞定！核心逻辑就是用一个布尔状态变量来控制第二个按钮的显示/隐藏，点击第一个按钮时触发方法切换这个变量的值就行，我给你写个完整的示例：

1. 组件逻辑文件（example.ts） #

我们在组件类里定义状态变量和点击触发的方法：

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

@Component({
  selector: 'app-example',
  templateUrl: './example.html'
})
export class ExampleComponent {
  // 初始化状态：第二个按钮默认隐藏
  showSecondButton = false;

  // 第一个按钮的点击触发方法
  handleShowButton(): void {
    // 切换状态：如果需要点击后只显示不隐藏，直接写 this.showSecondButton = true; 即可
    this.showSecondButton = !this.showSecondButton;
  }
}

2. 模板文件（example.html） #

在模板里绑定点击事件，并用*ngIf控制第二个按钮的显示：

<!-- 触发按钮：绑定点击事件到组件类的handleShowButton方法 -->
<button (click)="handleShowButton()">点击显示第二个按钮</button>

<!-- 目标按钮：通过*ngIf根据状态变量决定是否渲染 -->
<button *ngIf="showSecondButton">我是被触发显示的按钮</button>

补充说明 #

• (click)是Angular的事件绑定语法，用来监听DOM元素的点击事件，触发组件类中对应的方法。
• *ngIf是结构型指令，它会根据绑定的布尔值添加/移除DOM元素，而不是简单的CSS隐藏（比如display: none），如果只是需要视觉隐藏可以用[hidden]，但这里用*ngIf更符合需求场景。
• 如果你的需求是点击一次后永久显示第二个按钮，只需要把handleShowButton方法里的代码改成this.showSecondButton = true;就可以了。

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