如何使用 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.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载一个页面，例如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
  ],

之后，您需要在需要它的页面module上import ComponentsModule ，如下所示。

我的模块.ts

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

Answer 2

这就是ComponentsModule样子，否则您将无法使用ion-grid 、 ion-row等离子包装器。

components.module.ts

import {NgModule} from '@angular/core';
import {CreatePostComponent} from './create-post/create-post';
import {IonicModule} from "ionic-angular";

@NgModule({
    declarations: [
    CreatePostComponent,
  ],
    imports: [
    IonicModule, <== make sure to import IonicModule
  ],
    exports: [
    CreatePostComponent,
  ]
})
export class ComponentsModule {}

然后在此之后，您可能希望将ComponentsModule放在您想要使用它的任何其他组件的module.ts文件的导入数组中。 例如，在这里，我想在我的新闻源页面（离子页面）中使用CreatePostComponent 。

新闻源.module.ts

@NgModule({
  declarations: [
    NewsfeedPage,
  ],
  imports: [
    IonicPageModule.forChild(NewsfeedPage),
    ComponentsModule
  ],
})

瞧，然后你可以在newsfeed.html使用你的CreatePostComponent选择器（在我的例子中是 create-post）。

<create-post></create-post>