带有离子标签的UI组件-Java 学习之路

我正在尝试为我的选项卡创建 Headers /导航栏组件，但在使用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 {}

My Tabs Main/Parent Page

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 添加了这个组件
任何帮助将不胜感激 . 谢谢 .

2 回答

1

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

回复于 2024-04-25T08:02:26+08:00

您需要在navbar.ts上导入NavController

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

回复于 2024-04-25T08:02:26+08:00

带有离子标签的UI组件

2 回答

相关问题