Ionic2 离子2离子内容与Android中的离子标题重叠

ion标签和ion内容与ion标题重叠当我在标题中加载一个图像时，它只在我第一次访问页面时发生，之后加载良好。 这是组件

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
@Component({
selector: 'page-home',
templateUrl: 'app/home.page.html'
})
export class HomePage {
public image: string;
appName = 'Ionic App';
constructor(public navController: NavController) { }
ionViewDidLoad(){
this.image = "https://source.unsplash.com/640x300/?technology"
}
}

这是html

<ion-header>
<ion-navbar>
<ion-title></ion-title>
</ion-navbar>
<img class="cabecera" [src]="image" width="100%">
</ion-header>
<ion-content padding class="contenido">
Welcome to this <ion-icon name="ionic"></ion-icon> <b>Ionic 2 app</b>.
</ion-content>

欢迎使用此Ionic 2应用程序。

在这本书中可以看到一个例子

---

问题在于，您仅在加载其余内容之后才加载图像（在ionViewDidLoad函数中）。加载图像后，需要调整内容大小，如中所述

将

ViewChild

和

Content

分别添加到从

@angular/core

和

爱奥尼亚angular

导入的内容中：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

使用

@ViewChild

为

离子内容

组件选择类别：

// ...
export class HomePage {
    @ViewChild(Content) content: Content;
    // ...

然后，加载图像后，调用

content

上的resize方法：

this.content.resize();

---

问题是，您仅在加载其余内容之后才加载图像（在ionViewDidLoad函数中）。加载图像后，需要调整内容大小，如中所述

将

ViewChild

和

Content

分别添加到从

@angular/core

和

爱奥尼亚angular

导入的内容中：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

使用

@ViewChild

为

离子内容

组件选择类别：

// ...
export class HomePage {
    @ViewChild(Content) content: Content;
    // ...

然后，加载图像后，调用

content

上的resize方法：

this.content.resize();

---

很好！非常感谢：）非常好！非常感谢：）