离子 3 在选项卡上延迟加载

Question

我想使用延迟加载向我的项目添加一个新选项卡。

我正在使用@IonicPage装饰器作为选项卡根页面的页面。

我的新页面：

// module
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { UsersPage } from './users';
@NgModule({
  declarations: [
    UsersPage,
  ],
  imports: [
    IonicPageModule.forChild(UsersPage),
  ],
})
export class UsersPageModule {}
// page
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage()
@Component({
  selector: 'page-users',
  templateUrl: 'users.html',
})
export class UsersPage {
  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }
  ionViewDidLoad() {
    console.log('ionViewDidLoad UsersPage');
  }
}

并尝试在我的选项卡中使用它：

// tabs.ts
export class TabsPage {
  @ViewChild(Tabs) tabs: Tabs;
  @ViewChild('findTab') findTab: ElementRef;
  // this tells the tabs component which Pages
  // should be each tab's root Page
  tab1Root: any = HomePage;
  tab2Root: any = FindPage;
  usersPage: any = "UsersPageModule";
  tab4Root: any = ChatsPage;
  findTabParams: any = {};
  subscriptions: any[] = [];
  totalUnreadMessages: FirebaseObjectObservable<any>;
  unread: boolean;
  anyUnread: boolean;
  ...
// tabs.html
<ion-tabs #tabs>
  <ion-tab [root]="tab1Root" tabIcon="home"></ion-tab>
  <ion-tab #findTab [root]="tab2Root" [rootParams]="findTabParams" tabIcon="calendar"></ion-tab>
  <ion-tab [root]="usersPage" tabIcon="person"></ion-tab>
  <ion-tab [root]="tab4Root" tabIcon="chatbubbles" [tabBadge]="unread?1:null" [tabsHideOnSubPages]=true></ion-tab>
</ion-tabs>

但是我收到以下错误：

Uncaught (in promise): invalid link: UsersPageModule

即使重新运行ionic serve

Answer 1

您不应该使用页面的模块，而应该使用页面本身：

  // ...
  // this tells the tabs component which Pages
  // should be each tab's root Page
  tab1Root: any = HomePage;
  tab2Root: any = FindPage;
  usersPage: any = 'UsersPage'; // <--- here! :)
  tab4Root: any = ChatsPage;
  // ...