1、新增app.routes.ts(代码如下:)
2、在login.ts中接收id的值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); // 发生登录请求 // @R_935_404@面 let modal = this.modalCtrl.create(TabsPage); modal.present(); } else { alert("账户或者密码不正确!"); } }*/ }原文链接:https://www.f2er.com/angularjs/146413.html