Question

我正在尝试为我的标签创建标题/导航栏组件，但在使用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

中的选择器

my 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中添加了此组件任何帮助将不胜感激。谢谢。

Answer 1

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

Answer 2

您需要在navbar.ts上导入NavController

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

带有离子标签的UI组件

2 个答案: