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

Posted zjw112

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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  里面,系统调准会报错。

以上是关于Ionic:如何实现登录页面跳转至Tabs页面的主要内容,如果未能解决你的问题,请参考以下文章

ionic中定义路由的问题

ionic3在首页与子页面同使用tabs

若依框架登录后跳转其他页面&获取不同的菜单&登录进入后跳转至动态路由的第一个路由

HTML网页如何实现关键词自动回复跳转至相应页面

Ionic 4 Tabs无法完全呈现

若依前后端分离框架去掉首页 登录后跳转至动态路由的第一个路由