ionic4关于ion-tabs的研究

最新推荐文章于 2021-03-26 16:58:45 发布

原创最新推荐文章于 2021-03-26 16:58:45 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ionic4 #typescript #ionic #web app

前端问题同时被 2 个专栏收录

51 篇文章

订阅专栏

javascript

37 篇文章

订阅专栏

本文详细解析了Ionic4中ion-tabs组件的使用方法，特别是如何结合懒加载优化应用性能。通过实例展示了如何配置懒加载，减少程序启动时间和打包体积。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在研究ionic4，对ion-tabs的用法有疑惑

在tab模块里的写法

tab.html

<ion-tabs selectedIndex="{{constants.rootTab}}">
  <ion-tab [root]="tab1Root" tabTitle="主页" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="进销存" tabIcon="inventory"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="商城" tabIcon="shop"></ion-tab>
  <ion-tab [root]="tab4Root" tabTitle="我的" tabIcon="mine"></ion-tab>
</ion-tabs>

tab.ts

  tab1Root = 'HomePage'
  tab2Root = 'InventoryPage';
  tab3Root = 'ShopPage';
  tab4Root = 'RegisterMinePage';

在app.component.ts里的写法

.....import { TabsPage } from '../pages/tabs/tabs';
.......
rootPage:any = TabsPage;

为什么一个是字符串，一个是模块名称？

查阅相关资料后，了解到是ionic懒加载懒加载的问题
https://blog.youkuaiyun.com/qq_18948359/article/details/80188328

 ionic懒加载 简介   
使用懒加载能够减少程序启动时间，减少打包后的体积。并且懒加载是当点击，触发的时候才去加载，所以程序启动的时间比较快。
配置懒加载需要以下几个步骤：
 1.给需要懒加载的页面配置module.ts；
 2.在对应页面的.ts文件里增加@IonicPage()特性；
3.在app.module.ts移除页面引用；
4.使用懒加载（在调用这个界面的地方，不 import界面，使用 string，组件名称字符串就是懒加载，ionic会帮我们注册组件和找到该组件。）

所以在home.ts文件加上@IonicPage()

@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})

就能愉快地使用字符串啦

tab1Root = 'HomePage'