ionic 3，延迟加载选项卡组件 [英] ionic 3, lazy-loading tabs components

问题描述

我正在尝试创建一个具有延迟加载但不导入组件的 ionic 3 tabs 应用程序.

I'm trying to create a ionic 3 tabs app with lazy loading without importing the components .

在我的 app.component.ts 中

in my app.component.ts

 rootPage:string = "Tabs";

在 tabs.html 中

in tabs.html

<ion-tabs>
<ion-tab [root]="Favorites" tabTitle="fav" tabIcon="star"></ion-tab>
<ion-tab [root]="libaray" tabTitle="Library" tabIcon="book"></ion-tab>
</ion-tabs>

在Favorites.module.ts中

in Favorites.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { Favorites } from './favorites';

@NgModule({
  declarations: [
    Favorites,
  ],
  imports: [
    IonicPageModule.forChild(Favorites),
  ],
  exports: [
    Favorites
  ]
})
export class FavoritesModule {}

到目前为止，标签页加载成功，但没有视图(空白页).我认为我使用延迟加载的 [root] 属性的问题！如何解决?

so far , the tabs page loads successfully but no view (blank page) . i think the problem that i'm using [root] attribute with lazy loading ! how to fix that ?

谢谢

推荐答案

检查 这里.

<ion-tab [root]="Favorites" tabTitle="fav" tabIcon="star"></ion-tab>
<ion-tab [root]="libaray" tabTitle="Library" tabIcon="book"></ion-tab>

这里libaray和Favorites需要是组件的变量.

Here libaray and Favorites need to be variables of the component.

在您的组件中尝试将离子页面等效的字符串设置为 Tabs.ts 中的变量:

In your component try setting string equivalent of the ionic page to the variables in Tabs.ts:

export class Tabs{
 Favorites:any='Favorites';
 libaray:any = 'libaray'; //assuming you tried to give the page class name to `root`.
}

注意:请确保不要将延迟加载的页面导入页面模块以外的任何位置.

Note: Be sure not to import your lazy loaded pages anywhere other than within the page module.

这篇关于ionic 3，延迟加载选项卡组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！