事件跳转

this.router.navigate

1 动态路由的事件跳转

<button (click)="handleClick()">跳转detail</button>

//导入路由
import {Router} from "@angular/router"
export class HomeComponent implements OnInit {
  public id:string = "1213"
  //配置
  constructor(private router:Router) { }
  handleClick(){
    //跳转
    this.router.navigate(['/detail',this.id])
  }
}

接收

import {ActivatedRoute} from '@angular/router'
...
export class DetailComponent implements OnInit {
  constructor(public route:ActivatedRoute) { }
  ngOnInit() {
   this.route.params.subscribe(res=>{
     console.log(res)
   })
  }
}

2 get传值的事件跳转

//导入NavigationExtras
import {Router,NavigationExtras} from "@angular/router"

//配置 NavigationExtras的参数
export class HomeComponent implements OnInit {
  public id:string = "1213"
  constructor(private router:Router) { }
  handleClick(){
    let navigationExtras:NavigationExtras ={
      queryParams:{
        "id":this.id
      }
    }
    //跳转
    this.router.navigate(['/detail'],navigationExtras)
  }
}

接收

//导入正在显示的路由
import {ActivatedRoute} from '@angular/router'
export class DetailComponent implements OnInit {
  //构造函数中配置
  constructor(public route:ActivatedRoute) { }
  ngOnInit() { 
      //subscribe触发
    this.route.queryParams.subscribe(res=>{
      console.log(res)
    })
  }
}