ค้นหาเว็บไซต์

angular - วิธีลบ <ion-footer> ใน Ionic 2


ฉันพยายามซ่อนถ้าฉันคลิกที่ปุ่มค้นหา แต่มีปัญหาเล็กๆ ที่ฉันแก้ไม่ได้

ตัวอย่างเช่น นี่คือส่วนของโค้ด html ส่วนท้ายของฉัน

หมายเหตุ1: "search" เป็นตัวแปรปกติที่ถูกกำหนดในตอนแรกของโค้ด .ts โดยมีค่าเป็น "false".

หมายเหตุ2: หากฉันคลิกปุ่ม จะมีฟังก์ชันเพื่อเปลี่ยนเป็น "จริง"

<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>

เมื่อฉันต้องการซ่อนมัน หน้าเพจของฉันจะแสดงเหมือนรูปนี้ ฉันจะแก้ปัญหานี้ได้อย่างไร?

คำตอบ #1

เหมือนกับที่คุณสามารถเห็นในเอกสาร:

หากความสูงของ ion-header, ion-footer หรือ ion-tabbar เปลี่ยนแปลงได้แบบไดนามิก จำเป็นต้องเรียกใช้ content.resize() เพื่อปรับปรุงเลย์เอาต์ของ Content

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