今天完成的事情：完成了编辑页面
明天计划的事情：完成任务
收获：
ngular中路由跳转并传值四种方式
一、路由传值
注意一定是要传递索引值 let key = index。这种情况可以在url中显示参数，以问号隔断localhost:4200/dashboard/articleDetail?id=261
传递
<div *ngFor='let item of list ;let key = index;'>
<a [routerLink]="['/devicepay']" [queryParams]="{id:key}">
<ul>
<li>{{item}}</li>
</ul>
</a>
</div>
接收
首先引入 import {ActivatedRoute} from '@angular/router'
再声明： constructor(public route:ActivatedRoute) { }
接收： this.route.queryParams.subscribe((res)=>{
console.log(res)
})
二、动态路由传值
这种情况也可以在url中显示参数，以横杠隔断localhost:4200/dashboard/articleDetail/261
在路由中配置
{ path: 'articleDetail/:id', component: ArticleDetailComponent},
在html页面跳转
<div *ngFor='let item of deviceInfo.list ;let key = index;'>
<a [routerLink]="['/devicepay/',key]">
<ul>
<li>{{item}}</li>
</ul>
</a>
</div>
接收
先引入 import {ActivatedRoute} from '@angular/router'
再声明 constructor(public route:ActivatedRoute) { }
接收： this.route.params.subscribe((res)=>{
console.log(res)
})
三、动态js进行跳转 主要在方法对象中使用
html页面
<button (click)='gotoDevicePay(key)'></button>
配置路由
{ path: 'articleDetail',component:ArticleDetailComponent},
js中进行路由跳转
//先引入
import { Router} from '@angular/router'
//再声明
constructor( public router:Router) { }
//定义点击事件
gotoDevicePay(key):void{
//跳转路径 实现的是动态跳转数据
this.router.navigate(['/devicepay/'],{queryParams:{id:key}})
}
四、通过get方式可以传入多个参数到下一界面
引入 NavigationExtras
import { Router ,NavigationExtras} from '@angular/router';
定义一个方法执行跳转 ， 用 NavigationExtras
aaa(){
let navigationExtras: NavigationExtras = {
queryParams: { 'session_id': '123' },
fragment: 'anchor'
};
this.router.navigate(['/news'],navigationExtras);
}
接收
constructor(private route: ActivatedRoute) {
console.log(this.route.queryParams);
}
返回列表
评论