4、angular学习第四天（路由传参）

一、路由传参

代码接上次 的带routing的demo

1、查询参数传参

路由配置：

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

app.component.html页面中的a标签修改

<a [routerLink]="['/product']" [queryParams]="{id:1}"> 产品1</a>
<a [routerLink]="['/product']" [queryParams]="{id:3}"> 产品2</a>

在调用路由的a标签里面添加queryParams
在控制器中添加参数的获取

import { Component, OnInit } from '@angular/core';
import {ActivatedRoute, Params} from '@angular/router';

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {

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

  ngOnInit() {
    console.log('init');
    // 以下是订阅的方式获取参数 当参数变化的时候回调用匿名函数修改变量
    this.routerInfo.queryParams.subscribe((params: Params) => {
      this.productId = params['id'];
    });
   
    // 以下下获取参数是通过快照的方式获取的。
    // 快照方式在路由相同的情况下（这里指的相同是 路由中的配置相同）
    // 不会重复创建组件。从而使得onInit方法只会在路由初始化的时候创建一次。参数无法更新。
    // this.productId = this.routerInfo.snapshot.queryParams['id'];
  }

}

这样就实现了路由使用查询参数传参。

2、查询路径传参传参

路由配置：

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

这样是通过路由配置来传参

在app.component.html页面中修改

<a [routerLink]="['/product/3']"> 产品3</a>

在product.component.ts中修改 与第一种方法对比的话。这里的订阅参数是params 而不是 queryParams

import { Component, OnInit } from '@angular/core';
import {ActivatedRoute, Params} from '@angular/router';

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {

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

  ngOnInit() {
    console.log('init');
    // 以下是订阅的方式获取参数 当参数变化的时候回调用匿名函数修改变量
   
    this.routerInfo.params.subscribe((params: Params) => {
      this.productId = params['id'];
    });
    // 以下下获取参数是通过快照的方式获取的。
    // 快照方式在路由相同的情况下（这里指的相同是 路由中的配置相同）
    // 不会重复创建组件。从而使得onInit方法只会在路由初始化的时候创建一次。参数无法更新。
   
     this.productId = this.routerInfo.snapshot.params['id'];
    
  }

}

2、配置静态数据传参（估计不会怎么用到）

修改路由配置

{path: 'product_data', component: ProductComponent, data : [{id: 4}]},

在app.component.html页面中修改

<a [routerLink]="['/product_data']" > 产品4</a>

在product.component.ts中修改

import { Component, OnInit } from '@angular/core';
import {ActivatedRoute, Data, Params} from '@angular/router';

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {

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

  ngOnInit() {
    console.log('init');
    this.productId = this.routerInfo.snapshot.data[0]['id'];
  }