带有离子标签的 UI 组件答案

【问题标题】：UI component with ion-tabs带有离子标签的 UI 组件
【发布时间】：2017-10-31 15:00:35
【问题描述】：

我正在尝试为我的选项卡创建标题/导航栏组件，但在使用 ion-tabs 的组件中遇到问题。

它引发错误：1. If ‘custom-header’ is an Angular component, then verify that it is part of this module.

我试图将我的组件加载到同一个项目的正常页面中，它在其中可以正常工作。但在标签中，它会引发错误。

这是我的代码。

navbar.html

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

        <ion-chip>
            <button ion-button clear color="light">
              <ion-icon class="fa fa-microphone"></ion-icon>
            </button>
          </ion-chip>
      </ion-navbar>
</ion-header>

我在navbar.ts中的选择器

我的 component.module.ts

@Component({
   selector: 'navbar',
   templateUrl: 'navbar.html'
 })
import { NgModule } from '@angular/core';
import { NavbarComponent } from './navbar/navbar';
@NgModule({
    declarations: [NavbarComponent],
    imports: [],
    exports: [NavbarComponent]
})
export class ComponentsModule {}

我的标签页主/父页面

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { DashboardPage } from './dashboard';
import { ComponentsModule }from '../../components/components.module';

@NgModule({
  declarations: [
    DashboardPage,
    ComponentsModule
  ],
  imports: [
    IonicPageModule.forChild(DashboardPage),
    ComponentsModule
  ]
})
export class DashboardPageModule {}

我在app.module.ts中添加了这个组件
任何帮助将不胜感激。谢谢。

【问题讨论】：

标签： angular typescript ionic-framework ionic3

【解决方案1】：

您需要将其添加到Components.module.ts 文件中的declarations 和exports 部分下。之后，您需要在标签页的module 上添加imports ComponentsModule。如果您有任何问题，请告诉我。

【讨论】：

亲爱的我跟着你的步骤。但仍然面临同样的问题。当我在子/内容选项卡和父/主选项卡中添加 component.module.ts 时，它会显示此错误。 Error: Type NavbarComponent is part of the declarations of 2 modules. 但是当我只在主/父选项卡中添加它时，它显示navbar is not a known element: 1. If navbar is an Angular component, then verify that it is part of this module.
我还添加了有问题的 component.module.ts 代码。
它解决了我的错误。我按照你的步骤，只是在标签的 firstPage 模块的声明中添加了我的组件。
很高兴听到它有帮助:)
嗯。非常感谢。

【解决方案2】：

你需要在 navbar.ts 上导入 NavController

import { NavController } from 'ionic-angular';
...
constructor (public navCtrl: NavController) {
   ...
}

【讨论】：