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);



2、在login.ts中接收id的值

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, password: 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("账户或者密码不正确!");
   }
   }*/
}


你可能感兴趣的:(angular4,+,ionic3,获取路由参数)