IONIC2新建项目并添加导航

时间:2023-03-09 06:20:16
IONIC2新建项目并添加导航

一、   基础搭建

  1.      新建IONIC2项目

      ionic start myApp tabs --v2 不加--v2会新建ionic1的项目

  2.      运行项目

      cd myApp

      ionic serve

  3.      添加个人信息页

      ionic g page myinof

      添加页面后运行项目会报错:

      imports: [

        IonicModule.forChild(Myinfo),

        ],

      解决办法:把此句注释 // IonicModule.forChild(Myinfo),

  4.      将个人信息页添加到底部tab栏

    A.      在./pages/tabs/tabs.html中添加如下代码

IONIC2新建项目并添加导航

    B.       在./pages/app/app.component.ts中添加如下代码

IONIC2新建项目并添加导航

    C.      在./pages/app/app.module.ts中添加如下代码

IONIC2新建项目并添加导航

IONIC2新建项目并添加导航

    D.      在./pages/tabs/tabs.ts中添加如下代码

IONIC2新建项目并添加导航
    ionic2图标集:http://ionicframework.com/docs/ionicons/

    E.       运行效果

IONIC2新建项目并添加导航

二、   事件绑定

  1.      修改myinfo.html页面,在页面中添加一个按钮事件

      <a (click)="dofunction()">登录</a>

      在angular2中使用(click)=function()的形式绑定点击事件

  2.      修改myinfo.ts文件,在class Myinfo中添加dofunction()

IONIC2新建项目并添加导航

  3.      运行效果

IONIC2新建项目并添加导航

三、   登录功能

  1.      添加登录页

      在pages文件夹内新增auth文件夹,在auth文件夹内新增以下三个文件login.html、login.module.ts、login.ts

      login.html:

IONIC2新建项目并添加导航

      login.ts:

IONIC2新建项目并添加导航

      login.module.ts:

IONIC2新建项目并添加导航

  2.      注册login模块

      修改app.module.ts,添加login模块的注册信息

IONIC2新建项目并添加导航

IONIC2新建项目并添加导航

  3.      修改myinfo.html文件,添加样式和跳转按钮

IONIC2新建项目并添加导航

  4.      修改myinfo.ts文件,导入Login模块和添加goLogin()方法

IONIC2新建项目并添加导航

IONIC2新建项目并添加导航

  5.      运行效果

IONIC2新建项目并添加导航 IONIC2新建项目并添加导航