Angular跳转传值(get,动态路由,js)
Posted 风子磊
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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)
}
以上是关于Angular跳转传值(get,动态路由,js)的主要内容,如果未能解决你的问题,请参考以下文章