时间戳

首页 > 解决方案 > Ionic - iPhone X 状态栏覆盖共享标题组件

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

问题描述

我已经看到各种类似的帖子，其中 iOS 状态栏覆盖在应用程序的标题上。

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

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

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

此页面使用共享标题组件：

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

shared-header.component.html

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

shared-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() { }
}

此页面未使用共享标头组件：

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

为什么会发生这种情况？是因为额外的<shared-header></shared-header>标签吗？如果是这样，可以做些什么来解决这个问题？

标签： iosangularionic-frameworkionic3

解决方案

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

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

shared-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() { }
}

然后在标题中，您可以将组件作为属性注入，如下所示

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

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

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

推荐阅读