Ionic 3:几页的一个标题组件

Question

我正在从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();
    }
}

---

在我去的地方,我想补充我的头页,我做import {HeaderComponent} from './../header/header'的page.module.ts,加入HeaderComponent到declarations和entryComponents并添加到page.html中<app-header></app-header>和它出现了.但当我把它变成另一页时 - 我有一个错误:

导航失败:Type HeaderComponent是2个模块声明的一部分:PageOneModule和PageTwoModule!请考虑将HeaderComponent移动到导入DeliveryPageModule和PageTwoModule的更高模块.您还可以创建一个新的NgModule,它导出并包含HeaderComponent,然后在PageOneModule和PageTwoModule中导入NgModule.

然后我去app.module.ts并在那里导入标题(在我从page1和page2模块中删除标题之前)我有跟随错误:

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

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

Answer 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在使用它的所有模块中导入它.

使用代码将具有该表单

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

页面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惩罚你正确地追随你的直觉,通过创建共享结构来减少重复,这是任何人的猜测.