angular页面跳转时，用get传值和动态路由跳转传值

最新推荐文章于 2022-01-09 14:07:27 发布

古兔bug

最新推荐文章于 2022-01-09 14:07:27 发布

阅读量279

点赞数

分类专栏： angular8 文章标签： angularjs

本文链接：https://blog.youkuaiyun.com/weixin_41875025/article/details/107530807

版权

angular8 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了在Angular中如何进行页面跳转时传递值的方法，包括使用GET方式通过URL参数传递值以及通过动态路由配置进行跳转传值的详细步骤。在GET方式中，值被附加到链接后作为查询参数；而在动态路由跳转中，值在配置路由和调用导航时传递。

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

前提在把路由跳转路线写好

const routes: Routes = [
  {
    path: 'bottom',component:BottomMuduleComponent
  },
  {
    path: 'header',component:HeaderModuleComponent
  },
  {
    path: 'main',component:MainMoudleComponent
  },
  {
    path: 'slidebar',component:SlidebarModuleComponent 
  },
  {
    path: 'news',component:NewsComponent 
  },
  {
    path: 'newscontent',component:NewscontentComponent
  },
  {
    //默认路由,放置在最后
    path: '**',component:SlidebarModuleComponent 
  },

];

//get 传值
// 1 跳转（在跳转页面将值传入到跳转后的页面）

// <ol>
//   <li *ngFor="let item of list;let key=index">
//     <!-- <a>{{key}}--------- {{item}}</a> -->
//     <a [routerLink]="['/newscontent']" [queryParams]="{adi:key}">{{key}} ----{{item}}</a>
//   </li>
// </ol>

注：queryParams可以在get链接后面带入参数，他是一个对象
http://localhost:8000/newscontent?adi=9

// 2 接收（在跳转之后的页面接收跳转之前的页面

// import { ActivatedRoute } from '@angular/router'）

// constructor(public route:ActivatedRoute) { }

// this.route.queryParams.subscribe((data)=>{
//   console.log(data);

angular 动态路由跳转传值
//1 配置路由

// {
//   path: 'newscontent/:aid',component:NewscontentComponent
// }
//

2 传值

// <ul>
//   <li *ngFor="let item of list, let key=index">
//     <a [routerLink]="['/newscontent/', key]"
//     routerLinkActive="router-link-active">{{item}} ----- {{key}}</a>
//   </li>
// </ul>

/3 接收

// import { ActivatedRoute } from '@angular/router'）

// constructor(public route:ActivatedRoute) { }

// this.route.parmas.subscribe((data)=>{
//   console.log(data);