我正在从AngularJS迁移到Angular并开始使用Ionic 3(最新版)来构建我的应用程序 .
但我有一个小问题:我想在一些页面上使用一个 Headers ,具有注销功能等 . 我不想在每个组件页面中实现它,我想避免重复代码 .
我自己试了一下 . 首先,我创建了单独的头部组件
了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();
}
}
我转到我要添加 Headers 的页面,我在 page.module.ts
中创建 import {HeaderComponent} from './../header/header'
,将 HeaderComponent
添加到 declarations
和 entryComponents
并添加到page.html <app-header></app-header>
并且它出现了 . 但当我把它变成另一页时 - 我有一个错误:
导航失败:类型HeaderComponent是2个模块声明的一部分:PageOneModule和PageTwoModule!请考虑将HeaderComponent移动到导入DeliveryPageModule和PageTwoModule的更高模块 . 您还可以创建一个新的NgModule,它导出并包含HeaderComponent,然后在PageOneModule和PageTwoModule中导入NgModule .
然后我去app.module.ts并在那里导入 Headers (在我从page1和page2模块中删除 Headers 之前)我有跟随错误:
模板解析错误:'app-header'不是已知元素:1 . 如果'app-header'是Angular组件,则验证它是否是此模块的一部分 . 2.如果'app-header'是Web组件,则将'CUSTOM_ELEMENTS_SCHEMA'添加到此组件的'@ NgModule.schemas'以禁止显示此消息 . (“[错误 - >]
我找了一些例子但它们在Ionic 3中不起作用 . 任何人都可以帮忙或者给一本工作手册怎么做?
1 回答
根据错误消息的建议,您希望创建一个共享的NgModule,它既声明又导出您的共享头组件 . 例如:
shared.module.ts
然后,您需要在使用它的所有模块中导入
NgModule
.使用代码将具有该表单
page-one.module.ts
page-two.module.ts
如果你想知道为什么Angular惩罚你正确地追随你的直觉,通过创建共享结构来减少重复,这是任何人的猜测 .