如何在Ionic 2中移除<ion-footer>

Question

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

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

  

注1：“搜索”是在.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>

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

Answer 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();
  }
}