传值路由

2019-06-12  本文已影响0人  高纯度

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)

}

上一篇 下一篇

猜你喜欢

热点阅读