路由配置页
html页 get的路由跳转传值
<p>news works!</p>
<ng-container *ngFor="let item of list;let key=index" >
<a [routerLink]="['./work']"
[queryParams]="{aid:key,name:'张三'}">name{{key}}--->{{item}}</a>
<button (click)="goWork(key)">跳转</button>
<br>
</ng-container>
get 的js路由跳转传值
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-news',
templateUrl: './news.component.html',
styleUrls: ['./news.component.css']
})
export class NewsComponent implements OnInit {
constructor(private router: Router) { }
ngOnInit() {
for (let i = 0; i < 10; i++) {
this.list.push("这是第" + i + "条数据");
}
}
list: Array<string> = [];
// goWork(id:string){
// this.router.navigate(['/work',id]);
// }
data:any={
queryParams:{
name:'zhangsan',
aid:20,
}
}
goWork(){
this.router.navigate(['/work'],this.data);
}
}
获得路由所传的值
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-work',
templateUrl: './work.component.html',
styleUrls: ['./work.component.css']
})
export class WorkComponent implements OnInit {
constructor(private route: ActivatedRoute) { }
ngOnInit() {
this.route.queryParams.subscribe(data=>{
console.log(data);
console.log(data.aid+"###"+data.name);
})
}
}