如何使用Ionic 3和Angular 4创建可重用的组件

Question

我想为我的应用创建一个可重用的标头.所以我做了:

创建组件(app-header):

app-header.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: 'app-header.html'
})
export class AppHeaderComponent {

  text: string;

  constructor() {
    console.log('Hello AppHeaderComponent Component');
    this.text = 'Hello World';
  }

}

那有HTML:

app-header.html:

<div>
  {{text}}
</div>

而且我已经添加AppHeaderComponent到declarations中@NgModule:

...

import { AppHeaderComponent } from '../components/app-header/app-header';

@NgModule({
  declarations: [
    MyApp,
    TabsPage,
    AppHeaderComponent
  ],

...

我正在使用TabsTemplate,我想在每个标签中添加这个组件,所以,我做了feed.html(我的一个标签):

<app-header></app-header>

<ion-content>

...

但它给出了以下错误:

未捕获错误:模板解析错误:'app-header'不是已知元素:1.如果'app-header'是Angular组件,则验证它是否是此模块的一部分.2.如果'app-header'是Web组件,则将'CUSTOM_ELEMENTS_SCHEMA'添加到此组件的'@ NgModule.schemas'以禁止显示此消息.(" - >

[错误 - >]

所以,我改为app-header.ts:

import { Component, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: 'app-header.html'
})
@NgModule({
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class AppHeaderComponent {

  text: string;

  constructor() {
    console.log('Hello AppHeaderComponent Component');
    this.text = 'Hello World';
  }

}

但同样的错误仍然在这里.

我怎样才能做到这一点？

更新:

我正在使用Tabs,所以,我有:

tabs.ts:

import { Component } from '@angular/core';

import { FeedPage } from '../feed/feed';
import { AboutPage } from '../about/about';

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {

  tabFeed = FeedPage;
  tabAbout= AboutPage;

  constructor() {

  }
}

而且tabs.html:

<ion-tabs>
  <ion-tab [root]="tabFeed" tabIcon="paper"></ion-tab>
  <ion-tab [root]="tabAbout" tabIcon="search"></ion-tab>
</ion-tabs>

并且每个标签都会加载一个页面,例如feed.html(在问题中引用)

代码架构:

并components.modules.ts有:

import { NgModule } from '@angular/core';
import { AppHeaderComponent } from './app-header/app-header';
@NgModule({
    declarations: [AppHeaderComponent],
    imports: [],
    exports: [AppHeaderComponent]
})
export class ComponentsModule {}

Answer 1

你需要删除它,app.module.ts因为它已在声明ComponentsModule.

app.module.ts

@NgModule({
  declarations: [
    MyApp,
    TabsPage,
    //AppHeaderComponent <-- need to remove this
  ],

在此之后,你需要import在ComponentsModule以下页面上的如图所示module在你需要它.

my.module.ts

@NgModule({
  declarations: [
    MyPage,
  ],
  imports: [
    IonicPageModule.forChild(MyPage),
    ComponentsModule <-- here you need
  ],
})
export class MyPageModule { }