2017-11-13 14 views
0

遅延ロードを使用してプロジェクトに新しいタブを追加したいとします。Ionic 3タブでの遅延ロード

私は、タブのルートページになるページに@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

答えて

0
// ... 

    // 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; 

    // ... 
+1

おっと...おかげでたくさん –

+0

助けてうれしい:):3210あなたはページのモジュールが、ページ自体を使用しないでください – sebaferreras