Angular 爱奥尼亚：如何在多个页面上设置标题？

我已经创建了一个新的应用程序使用离子与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>
.
.
.

header.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 {}

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 {}

就这样做吧：

<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>

家
欢迎来到爱奥尼亚。
页脚

---

让我知道它是否工作。

要做到这一点，请执行以下步骤

使用命令创建名为

SharedModule

的模块

在

app.module.ts的imports'数组中导入
SharedModule

在

shared.module.ts的声明“和导出”数组中添加页眉和页脚组件

接下来在您的

home.module.ts的imports'数组中添加
SharedModule

如果您尝试共享的组件中的编译器无法识别ionic标记，请从shared.module.ts的imports数组中的“@ionic/angular”导入“ionic模块”

这样，当您需要在新页面上添加

时，只需重复步骤4，将其添加到新页面的模块中即可

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

---

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

如果您这样做的话。使组件不是页面<代码>离子g组件标题类似于此。您可以尝试导入HeaderPageModule而不是主模块中的HeaderPage吗？是的，这是缺少的步骤。我将标题更改为一个组件，现在它可以工作了。你今天让一个人很开心。谢谢目的是为了避免这种工作方式，以获得更结构化或更清晰的代码。不过，谢谢它起作用了。我将标题（这是一个页面）修改为一个组件，然后按照您所说的使用共享模块制作所有内容。感谢您的帮助。很高兴帮助它开始显示

'ion-icon'不是已知元素：

@RahulSharma您可以通过从'@angular/router'添加

导入{RouterModule}来修复它

导入SharedModule的@NgModule数组