ionic基础组件使用：tabs组件

https://ionicframework.com/docs/api/tabs

环境准备

创建应用

运行命令ionic start ionicAngularTabsApp：

选择Angular，回车：

选择tabs，回车：

回车，使用默认选项：

启动应用

到项目目录下面，使用ionic s启动应用。启动后：

应用

修改tab的名称、图标

添加一个tab

生成页的命令行：ionic g page 页名，例如ionic g page tab4：

修改tabs.page.html文件，增加刚创建的tab4：

但现在点击 收藏 这个tab是没有反应的。

修改tabs-routing.module.ts文件，增加tab4的路由：

现在点击 收藏 这个tab，就可以切换过去了：

同理，我们执行ionic g page tab5再增加一个tab：

增加路由：

在tabs.page.html文件增加tab5：

在页面中跳转到其它页面

先生成一个详情页，使用命令 ionic g page detail：

自动更新了全局路由文件app-routing.module.ts：

在tab5.page.html跳转到detail：

点击 前往详情页：

跳转到了详情页：

现在修改下detail.page.html，增加返回按钮：

现在再点击 前往详情页：

跳转到了 detail页面：

点击detail页面左上方的 返回 的箭头，就返回到了tab5页面：

带参数的路由跳转

修改tab5.page.html文件：

点击带有参数的路由跳转，可以传递参数了：

接收参数，下面修改下detail.page.ts：

下面将接收到的属性保存起来，在页面上展示出来。
修改下detail.page.ts：

修改detail.page.html：

点击时使用代码的方式编程跳转

不带参数跳转

修改tab5.page.html：

修改tab5.page.ts：

点击按钮 click me：

带参数跳转

修改tab5.page.ts文件：

tab5.page.html文件：

detail.page.html文件：

detail.page.ts：

点击 click me按钮：