标签:str bsp lin const ext oge tor navig ons
一,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)
}
标签:str bsp lin const ext oge tor navig ons
原文地址:https://www.cnblogs.com/zhulei2/p/13252051.html