美文网首页
传值路由

传值路由

作者: 高纯度 | 来源:发表于2019-06-12 23:00 被阅读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)

}

相关文章

网友评论

      本文标题:传值路由

      本文链接:https://www.haomeiwen.com/subject/yzzrfctx.html