Angular跳转传值(get,动态路由,js)

一,get传值

 

<ul *ngFor="let l of list;let ss=index;">
    <li><a routerLink="/newsDetail" [queryParams]="{aid:l.id}">{{l.content}}</a></li>

</ul>

接收

复制代码
import { ActivatedRoute } from '@angular/router';

constructor(public router:ActivatedRoute) { }

//get获取传值
 this.router.queryParams.subscribe((data)=>{
   console.log(data)
 })
复制代码

 二,动态路由传值

配置

{
    path:'newsDetail/:id',component:NewDetailComponent
  }

跳转

<ul *ngFor="let l of list;let ss=index;">

  <li><a [routerLink]="['/newsDetail',l.id]">{{l.content}}</a></li>
</ul>

接收

复制代码

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

constructor(public router:ActivatedRoute) { }

//
动态路由 this.router.params.subscribe((data)=>{ console.log(data) this.id=data.id; })
复制代码

 三、动态路由的js跳转

1, 引入

import { Router } from '@angular/router';

2.初始化

export class HomeComponent implements OnInit {
     constructor(private router: Router) {}
}

跳转

<button (click)="goHome()">goHome</button>
复制代码
import { Router } from '@angular/router';

    //js跳转
  goHome(){
    //传值
    //this.router.navigate(['/home','1'])

    //不传值
    this.router.navigate(['/home'])
  }
复制代码

 

四,js get传值

<button (click)="goGetHeader()">goGetHeader</button>
复制代码
import { Router,NavigationExtras } from '@angular/router';

constructor(public router:Router) { }

  goGetHeader(){
    let queryParams:NavigationExtras={
      queryParams:{'id':12}
    }

    this.router.navigate(['/header'],queryParams)

  }
复制代码

 

posted @   风子磊  阅读(218)  评论(0编辑  收藏  举报
编辑推荐:
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
阅读排行:
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 数据库服务器 SQL Server 版本升级公告
· 程序员常用高效实用工具推荐,办公效率提升利器!
· C#/.NET/.NET Core技术前沿周刊 | 第 23 期(2025年1.20-1.26)
点击右上角即可分享
微信分享提示