Angular routing - passing data when routing

There are 3 ways

1. Pass data in query parameters

2. Pass data in the routing path

When defining a routing path, specify the parameter name and carry the parameter in the actual path.

3. Pass data in routing configuration

1. Pass data in query parameters

Step 1: Modify the product details link in the template with a command queryParams

<a [routerLink]="['/product']" [queryParams]="{id:1}">商品详情</a>

Effect: Clicking on the link will pass a parameter with a product id of 1.

Step 2: Receive parameters in the product details component

Use ActivatedRoute to receive the id and assign it to productId to display in the template.

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) { }

  by OnInit () {
    this.productId = this.routeInfo.snapshot.queryParams["id"];
  }

}

Modify template display

<p>
  Here is the product information component
</p>
<p>
  Product id is {{productId}}
</p>

 

2. Passing data in the routing path

Step 1: Modify the route path attribute so that it can carry data

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

Step 2: Modify the parameters of the routing link to pass data

Pass a 2 in the past.

<a [routerLink]="['/product',2]" > Product Details </a> _ _ _

Effect:

The third step, the product details information component, takes the id from the url

this.productId = this.routeInfo.snapshot.params["id"];

3. Parameter snapshot and parameter subscription

1. Parameter snapshot problem

Parameter snapshot is to get parameters from snapshot.

this.productId = this.routeInfo.snapshot.params["id"];

Revise:

The response function for the product detail button, passing a 3 in the past.

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

question:

First click the home page, then click the product details link to correctly jump to the product details component, and then click the product details button, the problem comes, the id in the url changes to 3, and the id in the content display does not change or is 2.

reason:

Routing from the home component to the component component, the product details component will be created, and its constructor(), ngOnInit() will be called once.

But directly route from the product details component to the product details, since the product details component has already been created when the product details button is clicked, it will not be created again, and the ngOnInit() method will not be created again. So productId still holds the value it had when it was first created.

Workaround: parameter subscription. 

2. Parameter subscription 

The subscribe method of rxjs.

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

Problem solved.

 

When getting route parameters:

To determine that a component will not route from itself to itself, parameters can be obtained through parameter snapshots.

If you are not sure, use the parameter subscription method to obtain it.

 

The author of this article starof , because the knowledge itself is changing, the author is also constantly learning and growing, and the content of the article is also updated regularly. In order to avoid misleading readers and facilitate tracing back to the source, please reprint and indicate the source: http://www.cnblogs.com/ starof/p/9006185.html If you  have any questions, please discuss with me and make progress together.