Ionic 3：一个标题组件用于多个页面

Posted 2023-03-13

【中文标题】Ionic 3：一个标题组件用于多个页面

【英文标题】：Ionic 3: One header component for several pages

【发布时间】：2017-09-26 06:43:18

【问题描述】：

我正在从 AngularJS 迁移到 Angular，并开始使用 Ionic 3（最新）来构建我的应用程序。

但是我有一个小问题：我想在某些页面上使用一个标题，并具有退出功能等。我不想在每个组件页面中都实现它，我想避免代码重复。

我自己试过。首先我创建单独的标题组件

---

header.html

<ion-header>
  <ion-navbar color="primary-light">
    <ion-title>
        Super App
    </ion-title>
    <ion-buttons end>
        <button ion-button class="button-out" icon-only (click)="signOut()">
            <ion-icon class="fa fa-sign-out"></ion-icon>
        </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

---

header.ts

import  Component  from '@angular/core';
import  NavController  from 'ionic-angular';

@Component(
  selector: 'app-header',
  templateUrl: './header.html'
)
export class HeaderComponent 

    constructor(public navCtrl: NavController) 

    signOut() 
        //some auth strategy and then
        this.navCtrl.popToRoot();
    

---

我转到要添加标题的页面，我在page.module.ts 中创建了import HeaderComponent from './../header/header'，将HeaderComponent 添加到declarations 和entryComponents 并添加到page.html <app-header></app-header>，它是出现了。 但是当我在另一个页面上做同样的事情时 - 我有一个错误：

导航失败：类型 HeaderComponent 是 2 个模块声明的一部分：PageOneModule 和 PageTwoModule！请考虑将 HeaderComponent 移至导入 DeliveryPageModule 和 PageTwoModule 的更高模块。您还可以创建一个新的 NgModule，它导出并包含 HeaderComponent，然后将该 NgModule 导入 PageOneModule 和 PageTwoModule。

然后我去了 app.module.ts 并在那里导入标头（在我从 page1 和 page2 模块中删除标头之前）并且我遇到了以下错误：

模板解析错误： 'app-header' 不是已知元素： 1. 如果“app-header”是一个 Angular 组件，那么验证它是这个模块的一部分。 2. 如果 'app-header' 是一个 Web 组件，则将 'CUSTOM_ELEMENTS_SCHEMA' 添加到此组件的 '@NgModule.schemas' 以禁止显示此消息。 ("[错误->]

我查找了示例，但它们在 Ionic 3 中不起作用。任何人都可以提供帮助或提供工作手册如何做到这一点？

【问题讨论】：

很高兴您想避免重复，这很好。通常，您要做的是将标头提取到组件中。你试过什么？

@AluanHaddad 我更新了我的问题。

【参考方案1】：

根据错误消息的建议，您希望创建一个共享的 NgModule 来声明和导出您的共享标头组件。 例如：

shared.module.ts

import NgModule from '@angular/core';
import IonicPageModule from 'ionic-angular';
import HeaderComponent from './header-component';

@NgModule(
  imports: [IonicPageModule.forChild(HeaderComponent)],
  declarations: [HeaderComponent],
  exports: [HeaderComponent]
) export class SharedModule 

然后你需要在所有使用它的模块中导入NgModule。

消费代码将具有以下形式

page-one.module.ts

import NgModule from '@angular/core';
import IonicPageModule from 'ionic-angular';
import SharedModule from './shared.module';

@NgModule(
  imports: [IonicPageModule, SharedModule]      
) export class PageOneModule 

page-two.module.ts

import NgModule from '@angular/core';
import IonicPageModule from 'ionic-angular';
import SharedModule from './shared.module';

@NgModule(
  imports: [IonicPageModule, SharedModule]      
) export class PageTwoModule 

如果你想知道为什么 Angular 会惩罚你，因为你正确地遵循你的直觉，通过创建共享结构来减少重复，这是任何人的猜测。

【讨论】：

按照你的建议做...现在我有一个错误：Error: Template parse errors: 'ion-title' is not a known element。再次删除 ion-title 和相同的错误，但关于 ion-icon...

这意味着其他模块需要导入以前由page.module 导入的东西，可能是离子模块。

有一个 IonicPageModule 可以在 Ionic 框架中引导页面。它应该由import IonicPageModule from 'ionic-angular'; 在每个模块中导入。在 header.module.ts 中，它也应该在 @NgModule 中作为 imports: [IonicPageModule.forChild(NavbarComponent)] 导入。 @aluanhaddad 请在您的答案中添加此内容。再次感谢！ :)

@Merge-pony 谢谢，我更新了答案。真高兴你做到了。 Ionic 2 设法使 @NgModule 更加混乱，这是一项了不起的壮举。

嗨，Aluan，如果我想在共享目录中创建另一个组件怎么办？那我该如何配置 IonicPageModule 呢？

【参考方案2】：

Header.html

<ion-header>
<div col-12>
    <div col-1 class="iconspace togglementopmargin" float-left>
        <ion-col width-33  >
            <button class="menubutton"  block>
                <ion-icon name="md-menu" (click)="openSideMenu()"></ion-icon><br>

            </button>
        </ion-col>
    </div>
    <div col-4 class="headertitle headertitlespace" float-left>
        UserName
      
    </div>
    <div col-2 class="iconspace" float-right end (click)="gotoadd()">
        <ion-col  class="addbtn" >
            <button class="addbtn" block >
                <ion-icon name="md-add"></ion-icon><br>
            <div>    Add</div>
            </button>
        </ion-col>

    </div>
</div>

</ion-header>