angular路由跳转，并获取参数问题

1、新增app.routes.ts（代码如下：）

import {Routes,RouterModule} from '@angular/router';
import {NgModule} from "@angular/core";
// 引入要用的组件
import{LoginPage} from "../pages/login/login";
import{SettingPage} from "../pages/setting/setting";
import{UserPage} from "../pages/user/user";
import{TabsPage} from "../pages/tabs/tabs";

// Routes配置：保存着哪个url对应着展示哪个组件，以及在哪个RouterOutlet中展示组件
const routes: Routes = [
  /* 在path里不要用“/”来区分根目录还是子目录，且path为自定义名字，一般建议与组件名相同;
   在空路径下，会跳转到HomeComponent
   */
  /* {
   path: '',component: LoginPage
   },*/
  {
    path: 'login/:id',component: LoginPage
  },{
    path: 'user',component: UserPage
  },{
    path: 'tabs',component: TabsPage
  },{
    path: 'setting',component: SettingPage
  },// 重定向
  {
    path: '**',pathMatch: 'full',redirectTo: ''
  }
];
// 将路由配置导出为 appRouting 以供调用,子模块中的路由使用 forChild 而不是 forRoot
export const AppRoutes = RouterModule.forRoot(routes);

import {Component,OnInit} from '@angular/core';
import {IonicPage,ModalController} from 'ionic-angular';
import {TabsPage} from "../tabs/tabs";
import  {LoginService} from  './login.service';
import {ActivatedRoute,Params} from '@angular/router';
import {Location}     from '@angular/common';
import 'rxjs/add/operator/switchMap';

@IonicPage()
@Component({
  selector: 'page-login',templateUrl: 'login.html',providers: [LoginService]
})
export class LoginPage implements OnInit {

  private username: string;
  private userpass: string;
  private id: number;

  constructor(public modalCtrl: ModalController,public  loginService: LoginService,public route: ActivatedRoute,public location: Location) {
    // http.post()
  }

  ngOnInit() {
    // let id = this.route.params.subscribe(data=>console.log(data.id));
    this.route.params.subscribe((data) => this.id = data.id);
    console.log("路由中传过来的id是：" + this.id);
  }

  back() {
    console.log("点击了返回按钮！")
    this.location.back();
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad LoginPage');
  }

  /**
   * 登录
   */
  userLogin(username: HTMLInputElement,password: HTMLInputElement,toggle) {

    this.username = username.value;
    this.userpass = password.value;
    this.loginService
      .login(this.username,this.userpass)
      .then(result => {
        console.log("登录接口返回的信息是：" + result);//打印返回的数据
        if (result.code == 200 && result.data) { // 登录成功
          // 在这里做判断，路由跳转
          let modal = this.modalCtrl.create(TabsPage);
          modal.present();
        } else { // 登录失败
          alert(result.message);
        }
      });
  }


  /*userLogin(username: HTMLInputElement,toggle) {
   console.log("是否记住密码：" + toggle.value);
   if (username.value.length <= 0) {
   alert("请输入用户名");
   return false;
   }
   if (password.value.length <= 0) {
   alert("请输入密码");
   return false;
   }
   if (username.value == 'zxd' && password.value == '123') {
   alert("登录成功！");
   let userinfo: string = "用户账户是：" + username.value + "用户密码是：" + password.value;
   console.log(userinfo);
   // 发生登录请求


   // 跳转页面
   let modal = this.modalCtrl.create(TabsPage);
   modal.present();
   } else {
   alert("账户或者密码不正确！");
   }
   }*/
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!