Ionic-iPhone X状态栏覆盖共享标题组件

该问题是由头标记中包含组件标记引起的,出于某种原因,这会导致头呈现不正确。我使用的解决方案是在头中使用一个属性,而不是组件标记。

在组件内部,将选择器包装在方括号中,以将其定义为可以将其用作属性

共享头.component.ts

import { Component, Input } from '@angular/core';

@Component({
    selector: '[shared-header]',
    templateUrl: 'shared-header.component.html'
})

export class SharedHeaderComponent {

    @Input('title') title: string;
    constructor() { }
}

然后在头中,您可以将组件作为如下属性注入

<ion-header shared-header title="Home - shared header">
</ion-header>

如果希望通过标记和属性访问组件,可以定义多个选择器

@Component({
    selector:'[shared-header], shared-header',
    templateUrl: 'shared-header.component.html'
})

你可以试试下面的步骤

1) 使用statusbar cordova插件,您可以设置

if (this.statusBar) {
   this.statusBar.styleDefault();
   this.statusBar.overlaysWebView(false); 
}

 <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi"/>

您还可以尝试在头类中添加padding top吗

header {
    /* ... */
    /* Status bar height on iOS 10 */
    padding-top: 0px;
    /* Status bar height on iOS 11.0 */
    padding-top: constant(safe-area-inset-top);
    /* Status bar height on iOS 11+ */
    padding-top: env(safe-area-inset-top);
}