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

Question

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

我尝试将标题引用到 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注释。

除了错误之外，我什至不确定是否使用以下方式调用了标头<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 {}

头文件.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

要实现此目的，请按照以下步骤操作

1. SharedModule创建一个使用命令调用的模块ionic generate module shared
2. 将其导入SharedModule到您的导入数组中app.module.ts
3. 在声明和导出数组中添加页眉和页脚组件shared.module.ts
4. 接下来添加SharedModule您的导入数组home.module.ts
5. 如果您尝试共享的组件中的编译器无法识别 ionic 标签，请从shared.module.ts 的导入数组中的“@ionic/angular”导入“IonicModule”。

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

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

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