Ionic：如何實現登錄頁面跳轉至Tabs頁面

第一步：首先在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  里面，系統調准會報錯。