Ionic：如何实现登录页面跳转至Tabs页面

Posted 2020-11-08 zjw112

第一步：首先在cmd命令行中创建Login页面。

ionic g page Login

在vscode里面的目录结构里面就会出现login文件夹并自动生成了四个文件，分别是login.html、login.module.ts、login.scss、login.ts。

 

第二步：在login.html页面中，写入以下登录页面的前段代码。

<ion-header>
  <ion-navbar>
    <ion-title>登录</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
    <ion-item>
      <ion-label fixed>账号</ion-label>
      <ion-input type="text" placeholder="请输入账号" #username></ion-input>
    </ion-item>
    <ion-item>
      <ion-label fixed>密码</ion-label>
      <ion-input type="password" placeholder="请输入密码" #password></ion-input>
    </ion-item>
  <ion-item no-lines>
    <label item-right>记住密码</label>
    <ion-toggle></ion-toggle>
  </ion-item>

  <div style="text-align: center; margin-left: 30px; margin-right: 30px;">
    <button ion-button block color="danger" (click)="logIn(username, password)">
      登录
    </button>
  </div>
</ion-content>
 

　　

第三步：我们可以看到我在登录的按钮里面 加了一个 logIn(username, password) 方法，这个方法开始在哪里调用的呢？要在login.ts里面写这个方法的具体内容。

export class LoginPage {
 
  constructor(public navCtrl: NavController) {
    
  }
  ionViewDidLoad() {
    console.log(‘ionViewDidLoad LoginPage‘);
  }

  logIn(username:HTMLInputElement,password:HTMLInputElement ) {
    let userinfo: string = ‘用户名：‘ + username.value  + ‘密码：‘ + password.value;
    alert(userinfo);
    this.navCtrl.push(TabsPage);
  }

}

 

第四步：这时候把这段代码替换原来的 LoginPage里面，肯定会报错，因为找不到TabsPage，那TabsPage在哪里呢？需要在login.module.ts文件里面定义好。

先引入  import { TabsPage } from "../tabs/tabs";

再到  @NgModule  中的  declarations  和 entryComponents 添加  TabsPage  （也就是导入的页面名称）如以下代码

import { TabsPage } from "../tabs/tabs";

@NgModule({
  declarations: [
    LoginPage,
    TabsPage,
  ],
  imports: [
    IonicPageModule.forChild(LoginPage),
  ],
  entryComponents: [
    LoginPage,
    TabsPage,
  ],
})
export class LoginPageModule {}

接下来直接保存运行就可以了。

 

注意：如果没有第四步中，把tabspage放到@NgModule  里面，系统调准会报错。