5-4事件跳转路由

• 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])
  }
}

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)
  }
}