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并添加to page.html <app-header></app-header>它出现了。但是当我把它变成另一页时 - 我有一个错误：

导航失败：类型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'以禁止显示此消息。（“[ERROR - ＆gt;]

我找了一些例子，但它们在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会通过创建共享结构来正确地追随你的本能以减少重复，这就是你的猜测。

Answer 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>

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

2 个答案: