Ionic 3：几页的一个标题组件 [英] Ionic 3: One header component for several pages

问题描述

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

I'm migrating from AngularJS to Angular and started to use Ionic 3 (latest) to build my app.

但我有一个小问题：我想要在一些页面上使用一个标题，带有注销功能等。我不想在每个组件页面中实现它，我想避免重复代码。

But I have a small problem: I want to use one header on some pages with sign out function and etc. I don't want to implement it in every component page and I want to avoid duplication of code.

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

I tried on my own. First of all I create separate header component

header.html

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

---

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();
    }
}

---

我转到我要添加标题的页面，我在中的'./../ header / header'中创建了 import {HeaderComponent} page.module.ts ，将 HeaderComponent 添加到声明和 entryComponents 并添加到page.html < app-header>< / app-header> ，它就出现了。
但是当我把它变成另一个页面时 - 我有一个错误：

---

The I go to pages where I want to add my header, I made import {HeaderComponent} from './../header/header' in page.module.ts, add HeaderComponent to declarations and entryComponents and added to page.html <app-header></app-header> and it was appeared. But when I made the same into another page - I had an error:

导航失败：Type HeaderComponent是2个模块的声明：PageOneModule和PageTwoModule！请考虑将HeaderComponent移动到更高的模块，该模块导入DeliveryPageModule和PageTwoModule。你也可以创建一个新的NgModule导出并包含HeaderComponent，然后在PageOneModule和PageTwoModule中导入NgModule。

Failed to navigate: Type HeaderComponent is part of the declarations of 2 modules: PageOneModule and PageTwoModule! Please consider moving HeaderComponent to a higher module that imports DeliveryPageModule and PageTwoModule. You can also create a new NgModule that exports and includes HeaderComponent then import that NgModule in PageOneModule and PageTwoModule.

然后我去了app。 module.ts和导入标题（在我从page1和page2模块中删除标题之前）我有跟随错误：

Then I went to app.module.ts and import header there (before I removed header from page1 and page2 modules) and I've got follow error:

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

Template parse errors: 'app-header' is not a known element: 1. If 'app-header' is an Angular component, then verify that it is part of this module. 2. If 'app-header' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]

我找了一些例子，但它们在Ionic 3中不起作用。任何人都可以帮忙它或者给出一个工作手册怎么做？

I looked for examples but they are didn't work in Ionic 3. Can anybody to help with it or give a working manual how to do it?

推荐答案

根据错误信息的建议，你想创建一个共享的NgModule声明并导出您的共享标头组件。
例如：

As suggested by the error message, you want to create a shared NgModule that both declares and exports your shared header component. For example:

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 。

Then you need to import that NgModule in all of the modules that use it.

消费代码的格式为

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会通过创建共享结构来正确地追随你的直觉以减少重复，这就是任何人的猜测。

If you want to know why Angular punishes you for correctly following your instincts to reduce duplication by creating shared constructs, that is anyone's guess.

这篇关于Ionic 3：几页的一个标题组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！