ionic 3，延迟加载选项卡组件

Question

我正在尝试创建一个带有延迟加载的 ionic 3 标签应用程序，而不导入组件。

在我的 app.component.ts

 rootPage:string = "Tabs";

在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

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] 属性的问题！如何解决？

谢谢

Answer 1

勾选here。

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

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

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

中的变量

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

注意：请确保不要将延迟加载的页面导入除内部以外的任何地方页面模块。

Answer 2

确保在 Tabs.html 包含 [root]="FavoritesRoot"，如下所示

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

ionic 3，延迟加载选项卡组件

ionic 3, lazy-loading tabs components

ionic2

ionic3

angular