网页带参跳转

1、界面传参

app HTML界面传参:
<a [routerLink]="['/']">主页</a>
<a [routerLink]="['/product']" [queryParams]="{id: 1}">商品详细</a>
<input type="button" value="商品目录" (click)="toProductDetail()">
<router-outlet></router-outlet>

product.ts界面接受参数

export class ProductComponent implements OnInit {

  public productId: number;
  constructor(private  routerInfo: ActivatedRoute) { }

  ngOnInit(): void {
    this.productId = this.routerInfo.snapshot.queryParams["id"];
  }

}

products HTML显示

<p>商品ID是{
  {productId}}</p>

2、路由传参

app-routing界面