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

【问题标题】：ionic 3, lazy-loading tabs componentsionic 3，延迟加载选项卡组件
【发布时间】：2017-09-19 17:01:47
【问题描述】：

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

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

谢谢

【问题讨论】：

标签： angular ionic2 ionic3

【解决方案1】：

检查here。

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

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

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

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

注意：确保不要在页面模块之外的任何地方导入您的延迟加载页面。

【讨论】：

是的，有关更多信息，您可以查看此 github 问题github.com/driftyco/ionic/issues/11323
可能这需要进入文档。我在官方文档上没有看到此信息。
@ParagGhadge 谢谢。不明白你的意思。我可以建议你在 Github 中提出更新文档的问题吗？

【解决方案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>

【讨论】：