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)
}
心有所想,必有回响
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 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)