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

Question

我看过很多类似的帖子，都提到了 iOS 状态栏覆盖在应用程序标题上的问题。

我还没有看到另一个帖子和我有同样的问题。

我正在尝试为某些页面使用共享 header 组件，当我使用它时，我遇到了覆盖问题。

我已经简化了代码并使用 ionic tabs 入门模板重新创建了我的问题:

此页面使用共享 header 组件:

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

共享头.component.html

<ion-navbar>
    <ion-title>{{title}}</ion-title>
</ion-navbar>

共享头.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() { }
}

此页面未使用共享 header 组件:

<ion-header>
  <ion-navbar>
    <ion-title>
      About
    </ion-title>
  </ion-navbar>
</ion-header>

为什么会这样？是不是因为多了<shared-header></shared-header>标签？如果是这样，可以做些什么来解决这个问题？

Answer 1

问题是由于组件标签位于 header 标签内引起的，出于某种原因，这会导致 header 呈现不正确。我使用的解决方案是在 header 中使用属性而不是组件标签。

在组件内部将选择器包裹在方括号中以定义它能够将其用作属性

共享头.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() { }
}

然后在 header 中，您可以像这样将组件作为属性注入(inject)

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

如果你想通过标签和属性访问你的组件，你可以定义多个选择器

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