在另一个页面中调用选择器

Question

我在 ionic 3 中创建了一个名为 header 的页面

现在我想在主页等其他页面的顶部调用它。

下面是我的 header.ts，我希望它包含在 home.html 中

header.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';


@IonicPage()
@Component({
  selector: 'page-header',
  templateUrl: 'header.html',
})
export class HeaderPage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad HeaderPage');
  }

}

// app.module.ts

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { HeaderPage } from '../pages/header/header';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    HeaderPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    HeaderPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

home.html

    <ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

 <page-header>loading...</page-header>

<ion-content padding>
  The world is your oyster.
</ion-content>

我遇到了错误

Error: Uncaught (in promise): Error: Template parse errors:
'page-header' is not a known element:
1. If 'page-header' is an Angular component, then verify that it is part of this module.
2. If 'page-header' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

我也看过这个堆栈溢出问题：How do i call a page in another page - IONIC 2 但对我不起作用
请指教，我该怎么做？

Answer 1

你的header.html:

<div text-center padding>Loading...</div>

header.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { HeaderPage } from './header';

@NgModule({
  declarations: [
    HeaderPage,
  ],
  imports: [
    IonicPageModule.forChild(HeaderPage),
  ],
  exports: [
    HeaderPage
  ],
})
export class HeaderPageModule {}

home.ts

<ion-header>


<ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <page-header></page-header>
  <h3>Ionic Menu Starter</h3>

  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will show you the way.
  </p>

  <button ion-button secondary menuToggle>Toggle Menu</button>
</ion-content>

app.module.ts

@NgModule({


declarations: [
    MyApp,
    HomePage,
    ListPage
  ],
  imports: [
    BrowserModule,
    HeaderPageModule,
    IonicModule.forRoot(MyApp),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    ListPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}