4.动态路由

4-1配置

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

id是个变量，要先在home.component.ts中声明

export class HomeComponent implements OnInit {
  public id:string="123"
  ...
  }

4-2跳转传值

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

//第二种跳转方式
<a routerLink="/detail/{{id}}">跳转到detail</a>

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