我如何在IONIC 4中为我的所有页面设置一个通用的页眉组件？

Posted 2021-04-27

我想在所有离子页面（Ionic4）中将通用组件设置为标题。什么是正确的方法？

答案

在app.component.html上，您可以添加标题组件，如下所示：

<app-header></app-header>
<main>
<router-outlet></router-outlet>
</main>

另一答案

创建自定义组件。

运行：ionic g component header命令生成具有此内容的组件

header.component.html
header.component.scss
header.component.ts

Inside header.component.html放置标题内容，例如：

<ion-toolbar>
  <ion-buttons slot="start">
    <ion-back-button></ion-back-button>
  </ion-buttons>
  <ion-title class="ion-text-center">title</ion-title>    
</ion-toolbar>

在您应用的每个html页面内：

<ion-header>
  <app-header></app-header>
</ion-header>

<ion-content>

</ion-content>

请注意在app.module.ts或page.module.ts中添加Component's Module，如果使用延迟加载