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

最新推荐文章于 2025-04-07 10:14:53 发布

z_alvin

最新推荐文章于 2025-04-07 10:14:53 发布

阅读量4.8k

点赞数 1

分类专栏： angular4 + ionic3 获取路由参数文章标签： ionic angular

本文链接：https://blog.youkuaiyun.com/z_alvin/article/details/77408039

版权

angular4 + ionic3 获取路由参数专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在Angular项目中配置路由以及如何在组件间通过路由传递参数，并展示了具体的实现代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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