传值路由

1、get传值

1.跳转

新闻详情

  

    
    
{{key}}---{{item}}
  
 

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.跳转

  

    
{{key}}---{{item}}
  
 

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'])

this.router.navigate(['/productcontent/', '1234'])

2.get传值

1.引入声明模块

import { Router, NavigationExtras } from '@angular/router'
constructor(public router: Router) {}

2.跳转

goNewsContent() {
  let queryParams = {
  queryParams: { aid: 3 }
}
this.router.navigate(['news'], queryParams)

}