Estoy migrando de AngularJS a Angular y comencé a usar Ionic 3 (último) para crear mi aplicación.
Pero tengo un pequeño problema: quiero usar un encabezado en algunas páginas con función de cierre de sesión, etc. No quiero implementarlo en cada página de componentes y quiero evitar la duplicación de código.
Lo intenté por mi cuenta. En primer lugar, creo un componente de encabezado separado
encabezado.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>encabezado.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(); } } Cuando voy a las páginas donde quiero agregar mi encabezado, import {HeaderComponent} from './../header/header' en page.module.ts , HeaderComponent a declarations y entryComponents y lo agregué a page.html <app-header></app-header> y apareció. Pero cuando hice lo mismo en otra página, tuve un error:
Error al navegar: Type HeaderComponent es parte de las declaraciones de 2 módulos: PageOneModule y PageTwoModule. Considere mover HeaderComponent a un módulo superior que importe DeliveryPageModule y PageTwoModule. También puede crear un nuevo NgModule que exporte e incluya HeaderComponent y luego importe ese NgModule en PageOneModule y PageTwoModule.
Luego fui a app.module.ts e importé el encabezado allí (antes de eliminar el encabezado de los módulos de página 1 y página 2) y obtuve el siguiente error:
Errores de análisis de plantilla: 'app-header' no es un elemento conocido: 1. Si 'app-header' es un componente Angular, verifique que sea parte de este módulo. 2. Si 'app-header' es un componente web, agregue 'CUSTOM_ELEMENTS_SCHEMA' a '@NgModule.schemas' de este componente para suprimir este mensaje. ("[ERROR ->]
Busqué ejemplos pero no funcionaron en Ionic 3. ¿Alguien puede ayudarme o darme un manual de cómo hacerlo?
Como sugiere el mensaje de error, desea crear un NgModule compartido que declare y exporte su componente de encabezado compartido. Por ejemplo:
módulo.compartido.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 {} Luego, debe importar ese NgModule en todos los módulos que lo usan.
El código de consumo tendrá la forma
página-uno.módulo.ts
import {NgModule} from '@angular/core'; import {IonicPageModule} from 'ionic-angular'; import {SharedModule} from './shared.module'; @NgModule({ imports: [IonicPageModule, SharedModule] }) export class PageOneModule {}página-dos.módulo.ts
import {NgModule} from '@angular/core'; import {IonicPageModule} from 'ionic-angular'; import {SharedModule} from './shared.module'; @NgModule({ imports: [IonicPageModule, SharedModule] }) export class PageTwoModule {}Si desea saber por qué Angular lo castiga por seguir correctamente sus instintos para reducir la duplicación mediante la creación de construcciones compartidas, nadie lo sabe.
Encabezado.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>