选项卡上的 Ionic 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;

  // ...