Question

我创建了一个自定义组件，它可以在主页面上运行，但不能在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);
  }

}

新闻item.html（组分）：

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

新闻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';
  }

}

Answer 1

如果要在TabPage中使用自定义组件，则此页面不能是延迟加载模块。

Answer 2

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

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

Answer 3

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

tab ionic中的自定义组件3

3 个答案: