Question

我已经使用Ionic创建了一个新应用，其中包含3个组件，即Home，Header和Footer。我试图通过对它们进行引用，在多个页面上使用页眉和页脚（目前仅在主页上）。

我试图将Header引用到Home.page.html中，但我不起作用。

drinks = ["espresso", "chai", "decaf", "drip"]
caffeine = [64, 40, 0, 120]
zipped_drinks = zip(drinks, caffeine)
print(list(zipped_drinks))
drinks_to_caffeine = {key:value for key,value in zipped_drinks}
print(drinks_to_caffeine)

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

除了错误，我什至不确定是否使用<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

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

Home.module.ts

<app-header></app-header>

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

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

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

使用命令SharedModule创建一个名为ionic generate module shared的模块
将SharedModule导入app.module.ts的导入数组中
在shared.module.ts的声明和导出数组中添加页眉和页脚组件
接下来在您的SharedModule的导入数组中添加home.module.ts

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

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

如果您需要其他帮助，请告诉我。

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

2 个答案: