Question

我正在尝试使用延迟加载创建一个离子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>

离子3，延迟加载标签组件

2 个答案: