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

Amr*_*oub 9 ionic2 ionic3 angular

我正在尝试使用延迟加载创建一个离子3选项卡应用程序,而无需导入组件.

在我的app.component.ts中

 rootPage:string = "Tabs";
Run Code Online (Sandbox Code Playgroud)

在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>
Run Code Online (Sandbox Code Playgroud)

在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 {}
Run Code Online (Sandbox Code Playgroud)

到目前为止,标签页成功加载但没有视图(空白页).我认为我使用[root]属性与延迟加载的问题!怎么解决这个问题?

谢谢

Sur*_*Rao 12

点击这里.

<ion-tab [root]="Favorites" tabTitle="fav" tabIcon="star"></ion-tab>
<ion-tab [root]="libaray" tabTitle="Library" tabIcon="book"></ion-tab>
Run Code Online (Sandbox Code Playgroud)

这里libarayFavorites必须的组件的变量.

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

export class Tabs{
 Favorites:any='Favorites';
 libaray:any = 'libaray'; //assuming you tried to give the page class name to `root`.
}
Run Code Online (Sandbox Code Playgroud)

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

  • 愿这需要进入文档.我没有在官方文档上看到这些信息. (2认同)