5-3动态路由

1、配置

在app-routing.module.ts

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

2、跳转传值

1. 第一种跳转方式

<a [routerLink]="['/detail',id]" >跳转detail</a>

1. 第二种跳转方式

<a routerLink="/detail/{{id}}" >跳转detail</a>

3、接收this.route.params

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