网页带参跳转

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界面

const routes: Routes = [{path: '', component:HomeComponent}, {path: 'product/:id', component:ProductComponent},{path: '**', component:Code404Component},
];

app HTML传递参数

<a [routerLink]="['/']">主页</a>
<a [routerLink]="['/product',2]">商品详细</a>
<input type="button" value="商品目录" (click)="toProductDetail()">
<router-outlet></router-outlet>

product TS显示信息，参数快照方式获取参数

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

参数订阅方式获取参数(解决相同界面的跳转)

  ngOnInit(): void {this.routerInfo.params.subscribe((params:Params) => this.productId = params["id"]);//this.productId = this.routerInfo.snapshot.params["id"];}