Ionic 3: один компонент заголовка для нескольких страниц

Я перемещаюсь с 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 и добавил на страницу .html <app-header></app-header>, и это было появился. Но когда я сделал то же самое на другой странице - у меня была ошибка:

Не удалось выполнить навигацию: Тип HeaderComponent является частью деклараций из двух модулей: PageOneModule и PageTwoModule! Пожалуйста, подумайте о перемещении HeaderComponent в более высокий модуль, который импортирует DeliveryPageModule и PageTwoModule. Вы также можете создать новый NgModule, который экспортирует и включает HeaderComponent, затем импортирует этот NgModule в PageOneModule и PageTwoModule.

Затем я пошел в app.module.ts и импортировал заголовок там (до того, как я удалил заголовок из модулей page1 и page2), и я получил следующую ошибку:

Ошибки анализа шаблона: "app-header" не является известным элементом: 1. Если "app-header" является компонентом Angular, а затем убедитесь, что он является частью этого модуля. 2. Если "app-header" является веб-компонентом, добавьте "CUSTOM_ELEMENTS_SCHEMA" в "@NgModule.schemas" этого компонента, чтобы подавить это сообщение. ("[ERROR → ]

Я искал примеры, но они не работают в Ionic 3. Кто-нибудь может помочь с этим или дать рабочее руководство, как это сделать?

Ответ 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 наказывает вас за правильное следование вашим инстинктам, чтобы уменьшить дублирование, создавая общие конструкции, это все догадываются.