Ionic 3:多个页面的一个标题组件

问题描述

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

我转到要添加标题的页面，我在 page.module.tsimport {HeaderComponent} from './../header/header'/code>，将 HeaderComponent 添加到 declarations 和 entryComponents 并添加到 page.html 就出现了.但是当我在另一个页面上做同样的事情时 - 我有一个错误:

---

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:

无法导航:类型 HeaderComponent 是 2 个模块声明的一部分:PageOneModule 和 PageTwoModule！请考虑将 HeaderComponent 移至更高的模块，该模块导入 DeliveryPageModule 和 PageTwoModule.您还可以创建一个新的 NgModule，用于导出并包含 HeaderComponent，然后在 PageOneModule 和 PageTwoModule 中导入该 NgModule.

然后我去 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' 以抑制此消息.("[错误 ->]

我查找了示例，但它们在 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:多个页面的一个标题组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！