【技巧】ionic3中content的resize知多少

content中的resize方法，多少人知道和用过？

resize这个方法官方文档有写，所以我以为没什么特别，直至有几人问我，才发现不少人是不知道这个东西的，所以还是写一下。resize官网说明如下：

Tell the content to recalculate its dimensions. This should be called after dynamically adding/removing headers, footers, or tabs.

中文意思是动态添加/移除headers、footers或者tabs时，重新计算content的维度。 但其功能不仅于此，它还包含headers、footers或者tabs自身维度的调整，还有内部元素的动态添加/移除。

怎么理解呢？这样说吧，如果想把一个元素固定在头部，可以放在headers里面，如果想固定在底部，可以放在footers里面，然而当把这个元素给删除的时候（如使用*ngIf），它所撑开的headers或者footers空间是不会自动回收的，这样就会显示空白一片，这个时候，遇到此问题的人，一般第一反应是手动调整headers或者footers的高度样式，如ngClass或者ngStyle.height等等，然而不同平台(ios、android...)的值是不同的，所以也不好处理。同理，当动态添加/移除headers、footers时也面临同样空间处理问题。

针对这些情况，官网早有方法：

this.content.resize();

对应官网例子：

@Component({
  template: `
    <ion-header>
      <ion-navbar>
        <ion-title>Main Navbar</ion-title>
      </ion-navbar>
      <ion-toolbar *ngIf="showToolbar">
        <ion-title>Dynamic Toolbar</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <button ion-button (click)="toggleToolbar()">Toggle Toolbar</button>
    </ion-content>
`})

class E2EPage {
  @ViewChild(Content) content: Content;
  showToolbar: boolean = false;

  toggleToolbar() {
    this.showToolbar = !this.showToolbar;
    this.content.resize();
  }
}