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

「爱情、让人受尽委屈。」 2022-05-28 01:10 206阅读 0赞

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

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

<a [routerLink]="['/product']" [queryParams]="{id:1}">商品详情页</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，新增
    
        <p>
          商品ID ： {
             {productId}}
        </p>
 *  访问localhost:4200点击商品详情连接测试

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

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

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

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

<a [routerLink]="['/product',1]">商品详情页</a>

*  修改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]);
      }