5.事件跳转

this.router.navigate

5-1 动态路由的事件跳转

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

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

5-2get传值的事件跳转

**先将app-routing.module.ts中的动态路由写法去掉

 {
    path:"detail/:id",
    component:DetailComponent
  },
  改成:
 {
    path:"detail",
    component:DetailComponent
  },

//首页导入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)
  }
}