Question

我是ionic的新手，请帮助我接受。

我遇到了问题，我想显示text field的输入onclick search icon？我该怎么做。演示：https://stackblitz.com/edit/ionic-nxnfcl?file=pages%2Fhome%2Fhome.html

图片下方的

展示了我的问题

这是我的代码在线演示，请编辑： https://stackblitz.com/edit/ionic-nxnfcl?file=pages%2Fhome%2Fhome.html

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-header>
  <ion-navbar >
    <ion-title>Messages</ion-title>
    <ion-buttons right>
        <button ion-button icon-only>
          <ion-icon name="search"></ion-icon>
        </button>
    </ion-buttons>
    </ion-navbar>
</ion-header>

<ion-content padding>
  <form>
   <ion-navbar color="primary">

    <ion-buttons left start>
        <button ion-button icon-only>
          <ion-icon name="paper"></ion-icon>
        </button>
    </ion-buttons>

     <ion-buttons left>
        <button ion-button icon-only style="margin-left:100%">
          <ion-icon name="search"></ion-icon>
        </button>
    </ion-buttons>


    <ion-buttons>
        <button ion-button icon-only ion-col>
          <ion-icon name="chatboxes"></ion-icon>
        </button>
    </ion-buttons>

    <ion-buttons right>
        <button ion-button icon-only>
          <ion-icon name="notifications"></ion-icon>
        </button>
    </ion-buttons>


    <ion-buttons right end>
        <button ion-button icon-only>
          <ion-icon name="contact"></ion-icon>
        </button>
    </ion-buttons>
   </ion-navbar>
  </form> 
</ion-content>

Answer 1

首先，您可以在搜索图标中添加点击监听器，如下所示：

<button (click)="clickedSearchIcon($event)" ion-button icon-only style="margin-left:100%">
  <ion-icon name="search"></ion-icon>
</button>

然后在home.ts：

中创建相应的方法

clickedSearchIcon(event: Event) {
  this.showSearchBar = !this.showSearchBar;
}

该方法只是翻转一个变量，指示是否显示搜索栏。像这样添加这个变量：

export class HomePage {
 public showSearchBar = false;
 ...

然后，您必须添加要在模板中显示的搜索栏，并在单击图标时使用ngIf指令显示和隐藏它：

<ion-searchbar *ngIf="showSearchBar" [(ngModel)]="myInput" [showCancelButton]="false">
</ion-searchbar>

不要忘记添加ngModel变量myInput。

Here是您的stackblitz示例的更新版本。

Answer 2

Try like this

    Home.ts
    export class HomePage {

     public defaultInputBox: boolean = false;
      constructor(public navCtrl: NavController) {
      }

      showInputBox(){
        this.defaultInputBox = true;
      }

    In Home.html

<ion-buttons left>
        <button type="button" ion-button icon-only style="margin-left:100%" (click)="showInputBox();">
          <ion-icon name="search"></ion-icon>
        </button>
    </ion-buttons>


    <div *ngIf="defaultInputBox">
      <ion-item>
            <ion-label>Todo</ion-label>
            <ion-input type="text"  name="title"></ion-input>
          </ion-item>
    </div>

如何在离子3中单击图标时显示输入字段

2 个答案: