如何在 Ionic 2 中删除 <ion-footer>答案

【问题标题】：How to remove <ion-footer> in Ionic 2如何在 Ionic 2 中删除 <ion-footer>
【发布时间】：2019-01-29 20:08:12
【问题描述】：

如果我点击搜索按钮，我会尝试隐藏，但有一个小问题我无法解决。

例如，这是我的页脚 html 代码的一部分。

注意1：“search”是在.ts代码的第一个定义的普通变量，值为“false”。

注意2：如果我点击按钮，有一个函数可以将其更改为“true”。

<ion-footer *ngIf="!search">
  <ion-toolbar>
    <ion-input placeholder="Type some thing" [(ngModel)]="variables.chatText" (click)="autoScroll()"></ion-input>
    <ion-buttons end>
      <button ion-button icon-right color="royal" [disabled]="!variables.chatText" (click)="sendChat(variables.chatText)" >Send<ion-icon name="send"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-footer>

当我想隐藏它时，我的页面显示如这张图片。我该如何解决这个问题？

【问题讨论】：

在组件中发布您的打字稿代码（特别是您设置search 属性的位置）
@Rastographics 它是一个普通变量。我只是将他的值从“false”更改为“true”。这是点击搜索按钮后的功能：showSearchBar(){this.search=true;}

标签： angular typescript ionic2 ionic3

【解决方案1】：

就像你在the docs看到的那样：

如果ion-header、ion-footer或ion-tabbar的高度发生变化动态地，必须调用content.resize() 才能更新内容布局。

class YourPage {
  @ViewChild(Content) content: Content;
  search: boolean = false;

  toggleToolbar() {
    // Toggle the footer
    this.search = !this.search;

    // Update the size of the content
    this.content.resize();
  }
}

【讨论】：