Ionic：如何在多个页面上设置 header？

Question

我使用 Ionic 创建了一个包含 3 个组件的新应用程序，Home、Header 和 Footer。我试图通过引用它们在多个页面上使用 Header 和页脚（目前仅在主页上）。

我尝试将 Header 引用到 Home.page.html 中，但我没有用。

<app-header></app-header>

<ion-content>
    <div class="ion-padding">
        The world is your oyster.
        <p>If you get lost, the <a target="_blank" rel="noopener" href="https://ionicframework.com/docs/">docs</a> will be your guide.</p>
    </div>
.
.
.

我收到错误：错误错误：未捕获（承诺）：错误：模块 'HomePageModule' 导入的意外指令 'HeaderPage'。请添加 @NgModule 注解。错误：模块 'HomePageModule' 导入了意外的指令 'HeaderPage'。请添加@NgModule 注解。

除了错误，我什至不确定 Header 是使用 <app-header></app-header>

调用的

对于模块，我有以下代码：

Home.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
// import { MatButtonModule, MatCardModule, MatTabsModule, MatChipsModule, MatIconModule, MatToolbarModule, MatDatepickerModule, MatFormFieldModule, MatNativeDateModule } from "@angular/material";

import { HomePage } from './home.page';
// import { FooterPage } from '../footer/footer.page';
import { HeaderPage } from '../header/header.page';

@NgModule({
  imports: [
    HeaderPage,
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild([
      {
        path: '',
        component: HomePage
      }
    ])
  ],
  declarations: [HomePage]
})
export class HomePageModule {}

header.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

import { IonicModule } from '@ionic/angular';
import { HeaderPage } from './header.page';

const routes: Routes = [
  {
    path: '',
    component: HeaderPage
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  declarations: [HeaderPage],
  exports: [
    HeaderPage
 ]
})
export class HeaderPageModule {}

Answer 1

就这样：

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

<ion-content>
    <h1>Welcome to Ionic.</h1>
</ion-content>

<ion-footer>
    <ion-navbar>
        <ion-title>Footer</ion-title>
    </ion-navbar>
</ion-footer>

让我知道它是否有效。

Answer 2

要做到这一点，请按照以下步骤操作

使用命令 ionic generate module shared

SharedModule

在 app.module.ts

SharedModule

将页眉和页脚组件添加到 shared.module.ts
接下来在 home.module.ts

SharedModule

如果编译器无法识别您尝试共享的组件中的离子标签，请从 shared.module.ts 的导入数组中的“@ionic/angular”导入 'IonicModule'。

这样，当您需要在新页面上添加<app-header>时，只需重复步骤4，将其添加到新页面的模块中即可。

当您需要添加一个可以全局使用的新组件时，只需重复步骤 3 将组件添加到 SharedModule 声明并导出即可。

如果您需要任何进一步的帮助，请告诉我。

Ionic：如何在多个页面上设置 header？

Ionic: How to set a header on multiple pages?

module

header

ionic-framework

ng-modules

angular