我的 ion-content 与 Ionic 4 中的标题重叠

Question

我正在使用 Ionic 4 应用程序并安装了 Ionic 4 选项卡主题，并通过在 app.component.html 中添加标题代码使标题通用，但问题是我的与标题重叠。

这是我的app.component.html：

<ion-header>
    <ion-toolbar>
    <ion-icon name="more" slot="end"></ion-icon>
    </ion-toolbar>
</ion-header>
<ion-app>
    <ion-router-outlet></ion-router-outlet>
</ion-app>

这是我的tab1.page.html：

<ion-content>
    <ion-card class="welcome-card">
        <ion-img src="/assets/shapes.svg"></ion-img>
        <ion-card-header>
        <ion-card-subtitle>Get Started</ion-card-subtitle>
        <ion-card-title>Welcome to Ionic</ion-card-title>
        </ion-card-header>
        <ion-card-content>
        <p>Now that your app has been created, you'll want to start building out features and components. Check out some of the resources below for next steps.</p>
        </ion-card-content>
    </ion-card>
</ion-content>

我刚刚在 Ionic 4 中安装了全新的标签主题，我只做了这些更改。

非常感谢任何帮助。

这是我的StackBlitz

Answer 1

对于那些不想处理近似 css 样式的人，@AJT82 指出了处理这个问题的正确方法。通过创建自定义标题组件，您不必使用任何边距或填充样式。此外，您可以选择在特定页面上显示自定义标题。

假设我的工具栏需要在我的组件HomePageModule 上，我创建了一个子组件toolbar.ts。然后我将它导入到home.module.ts 并声明到home.page.html。

toolbar.ts
使用Input从html中检索title参数：

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

@Component({
  selector: 'app-toolbar',
  templateUrl: 'toolbar.html',
  styleUrls: ['toolbar.scss']
})
export class AppToolbar {
  @Input() public title: string;

  constructor() {}
}

toolbar.html
显示从模块接收的title：

<ion-header>
  <ion-toolbar>
    <ion-title>{{title}}</ion-title>
  </ion-toolbar>
</ion-header>

home.module.ts
导入toolbar的模块：

import { AppToolbar } from './toolbar/toolbar';

@NgModule({
  declarations: [AppToolbar]
})
export class HomePageModule {}

home.page.html
然后，使用title 参数在home 模板中声明它：

<app-toolbar [title]="'My Custom Title'"></app-toolbar>

<ion-content>
    <!-- content -->
</ion-content>

每个页面都应该导入这个组件并将其声明到它的 html 页面中。通过使用它，toolbar 不会重叠内容页面，并且可以显示特定的标题。

Answer 2

你可以试试这个吗？

<ion-app>
    <ion-header>
        <ion-toolbar>
            <ion-icon name="more" slot="end"></ion-icon>
        </ion-toolbar>
    </ion-header>
    <ion-content>
        <ion-router-outlet></ion-router-outlet>
    </ion-content>
</ion-app>

Answer 3

为避免ion-content 的重叠，您应该向ion-content 添加样式

<ion-content class="content"></ion-content>

.content{
 margin-top: 50px;
}

你可以试试上面的方法，或者如果可行的话试试..

<ion-content padding>

</ion-content>

为ion-content 标签添加填充

您可以在这里查看适合您的任何其他解决方案ion-content overlaps with header