tab ionic 3中的自定义组件答案

【问题标题】：Custom component inside tab ionic 3tab ionic 3中的自定义组件
【发布时间】：2017-11-27 14:20:57
【问题描述】：

我创建了一个自定义组件，它可以在主页上工作，但不能在 tabPage 内工作。这段代码有什么问题？谢谢各位。

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { SuperTabsModule } from 'ionic2-super-tabs';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { NewsItemComponent } from '../components/news-item/news-item';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    NewsItemComponent
  ],
  imports: [
    BrowserModule,
    SuperTabsModule.forRoot(),
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

home.html:

<ion-header  no-border>
  <ion-navbar color="primary">
    <button ion-button menuToggle icon-only>
      <ion-icon name='menu'></ion-icon>
    </button> 
    <ion-searchbar (ionInput)="getItems($event)" ></ion-searchbar>
    <ion-buttons end>
      <button ion-button icon-only (click)="openFavoritesPage()">
        <ion-icon name="heart-outline"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-tabs [ngClass]="{'visible': !showSearchList}" toolbarColor="light" toolbarBackground="primary" indicatorColor="danger" badgeColor="light">
    <ion-tab [root]="page1" [rootParams]="{'type': 'all'}" title="All"></ion-tab>
    <ion-tab [root]="page2" [rootParams]="{'type': 'news'}" title="News"></ion-tab>
    <ion-tab [root]="page3" [rootParams]="{'type': 'reviews'}" title="Reviews"></ion-tab>
    <ion-tab [root]="page4" [rootParams]="{'type': 'videos'}" title="Videos"></ion-tab>
    <ion-tab [root]="page5" [rootParams]="{'type': 'photos'}" title="Photos"></ion-tab>
  </ion-tabs>

  <ion-list class="searchitens" [ngClass]="{'visible': showSearchList}">
    <ion-item *ngFor="let item of items">
      {{ item }}
    </ion-item>
  </ion-list>

</ion-content>

home.ts:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';


@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  page1: any = 'NewsPage';
  page2: any = 'NewsPage';
  page3: any = 'NewsPage';
  page4: any = 'NewsPage';
  page5: any = 'NewsPage';

  showSearchList: boolean = false;
  items: string[];

  constructor(public navCtrl: NavController) {
    this.initializeItems();
  }

  getItems(ev: any) {
    // Reset items back to all of the items
    this.initializeItems();

    // set val to the value of the searchbar
    let val = ev.target.value;

    // if the value is an empty string don't filter the items
    if (val && val.trim() != '') {
      this.showSearchList = true;
      this.items = this.items.filter((item) => {
        return (item.toLowerCase().indexOf(val.toLowerCase()) > -1);
      })
    }else{
      this.showSearchList = false;
    }
  }

  initializeItems() {
    this.items = [
      'Mercedes Benz',
      'Chrysler',
      'Dodge',
      'Jeep',
      'Ford',
      'Lincoln',
      'Tesla Motors',
      'GMC',
      'Chevrolet',
      'Cadillac'
    ];
  }

  openFavoritesPage(){
      this.navCtrl.push("FavoritesPage");
  }



}

news.html：

<ion-content padding>
        <news-item ></news-item>    
</ion-content>

news.ts：

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-news',
  templateUrl: 'news.html',
})
export class NewsPage {

  items: any = [1,2,3,4,5,6,7,8,9,10,11,12];

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log(this.navParams.data.type);
  }

}

news-item.html（组件）：

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

news-item.ts(组件):

import { Component } from '@angular/core';
@Component({
  selector: 'news-item',
  templateUrl: 'news-item.html'
})
export class NewsItemComponent {

  text: string;

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

}

【问题讨论】：

你试过我的答案了吗？
Bruno 你能分享更多细节吗？你是如何解决这个问题的？我有同样的问题。谢谢。
当然。首先你必须创建一个 component.module.ts 类 import {NgModule} from '@angular/core';从“离子角度”导入 {IonicModule}；从“./labelgenerator/labelgenerator”导入{LabelGenerator}； @NgModule({ declarations: [LabelGenerator], imports: [IonicModule], exports: [LabelGenerator] }) export class CustomComponentsModule {} 在模块页面的导入部分导入它。 @NgModule({ 声明：[Dashboard]，导入：[ CustomComponentsModule, IonicPageModule.forChild(Dashboard) ], }) 导出类 DashboardModule {}
对不起，我无法识别代码

标签： ionic-framework tabs components

【解决方案1】：

当您想在 TabPage 中使用自定义组件时，此页面不能是延迟加载模块。

【讨论】：

【解决方案2】：

更新答案 为您的自定义组件创建一个模块，并将您的组件类添加到模块声明和导出中。

然后在您的 news.module.ts 导入中，导入您的自定义组件。这就是我在延迟加载页面中使用自定义组件的方式。

【讨论】：

您能提供更多信息吗？因为我也有同样的问题。

【解决方案3】：

不确定这是否适用于之前的版本，但在 Ionic 5 中，需要在 tabs.module.ts 中声明，不是 app.module.ts（由于@Bruno Verçosa 提到的延迟加载）。

【讨论】：