动态路由

1 配置

//app-routing.module.ts
{
    path:"detail/:id",
    component:DetailComponent
}

2 跳转传值

//第一种跳转方式
<a [routerLink]="['/detail',id]" >跳转detail</a>
//第二种跳转方式
<a routerLink="/detail/{{id}}" >跳转detail</a>

3 接收 this.route.params

//对应的子组件ts文件中
import {ActivatedRoute} from '@angular/router'
...
export class DetailComponent implements OnInit {
  constructor(public route:ActivatedRoute) { }
  ngOnInit() {
   this.route.params.subscribe(res=>{
     console.log(res)
   })
  }
}