(五)、Angular4.0 路由传递参数

一、在查询参数中传递参数

• 修改app.component.html中的商品详情页a标签

商品详情页

• 修改product.component.ts接收传递过来的参数

import { Component, OnInit } from '@angular/core';
import {ActivatedRoute} from '@angular/router';@Component({selector: 'app-product',templateUrl: './product.component.html',styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {private productId: number;constructor(private routeInfo: ActivatedRoute) { }ngOnInit() {this.productId = this.routeInfo.snapshot.queryParams['id'];}}

• 修改product.component.html，新增

  商品ID ： {{productId}}
  

• 访问localhost:4200点击商品详情连接测试

二、在路由路径(url)中传递参数

• 修改路由配置中的path属性，使其可以传递参数   app-routing.module.ts

{path: 'product/:id', component: ProductComponent}

• 修改app.component.html 商品详情页链接

商品详情页

• 修改product.component.ts 接收参数的配置 queryParams改为params

  ngOnInit() {this.productId = this.routeInfo.snapshot.params['id'];}

• 访问localhost:4200 测试

三、在路由配置中传递参数

• 修改app.component.ts中的toProductDetails()

  toProductDetails() {this.router.navigate(['/product', 2]);}

• 把product.component.ts中ngOnInit()从参数快照改为参数订阅

  ngOnInit() {this.routeInfo.params.subscribe((params: Params) => this.productId = params['id']);}

四、访问localhost:4200 点击商品详情链接和按钮都可以分别获取到数据

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！