1、get传值
1.跳转
<!-- get传值 -->
<a [routerLink]="[ '/newscontent' ]" routerLinkActive="active">新闻详情</a>
<ul>
<li *ngFor="let item of list ;let key=index">
<!-- 遍历后，在路由连接后面加上key值 -->
<a [routerLink]="['/newscontent']" [queryParams]="{aid:key}">
{{key}}---{{item}}</a>
</li>
</ul>
2.接收
import { ActivatedRoute } from '@angular/router'
constructor(public route: ActivatedRoute) {}
//打印路由对象
console.log(this.route.queryParams)
this.route.queryParams.subscribe(data => {
console.log(data)
})
2、动态传值
1.配置路由
{ path: 'newscontent/:aid', component: NewscontentComponent }
2.跳转
<!-- get传值 -->
<ul>
<li *ngFor="let item of list ;let key=index">
<a [routerLink]="['/newscontent'，key]">
{{key}}---{{item}}</a>
</li>
</ul>
3.接收
import { ActivatedRoute } from '@angular/router'
constructor(public route: ActivatedRoute) {}
this.route.query.subscribe(data => {
console.log(data)
})
3.js跳转路由
1.动态路由
1.引入声明模块
import { Router } from '@angular/router'
constructor(public router: Router) {}
2.跳转
this.router.navigate(['productcontent'])
<!-- 动态的“1234”变成 key ，不用加引号-->
this.router.navigate(['/productcontent/', '1234'])
2.get传值
1.引入声明模块
import { Router, NavigationExtras } from '@angular/router'
constructor(public router: Router) {}
2.跳转
<!-- 通过goNewsContent() 函数，传入对象-->
goNewsContent() {
let queryParams = {
queryParams: { aid: 3 }
}
this.router.navigate(['news'], queryParams)
}
