时间戳

首页 > 解决方案 > 如何使用ionic3中的按钮隐藏/显示功能

angular - 如何使用ionic3中的按钮隐藏/显示功能

问题描述

现在我正在使用 ionic3 框架开发一个移动音乐应用程序

在我的项目中有两个按钮

一个是about按钮，另一个是music按钮

这两个按钮位于同一个 div 中。 about按钮在右侧，music按钮在左侧

因此，每当用户单击about按钮时，我都需要显示有关艺术家的详细信息。如果用户单击music按钮，则我需要向用户显示歌曲列表

我有关于艺术家和歌曲列表的详细信息...但我不知道如何显示它..有人可以帮助我吗？

标签： angularionic-frameworkionic3

解决方案

你可以在你的 template.html 中做这样的事情

<div>
  <button ion-button (click)="onAboutClick()">About</button>
  <button ion-button (click)="onMusicClick()">Music</button>
<div>

<div *ngIf="isAboutAvailable">
  // about content
</div>

<div *ngIf="isMusicAvailable">
  // music content
</div>

在您的组件中

public onAboutClick(): void {
   this.isAboutAvailable = !this.isAboutAvailable;
   this.isMusicAvailable = false;
}

public onAboutClick(): void {
   this.isAboutAvailable = false;
   this.isMusicAvailable = !this.isMusicAvailable;
}

希望这可以帮助。

推荐阅读