[SOLVED] - Push same pages with different parameters


#1

Hi,

I’m creating a page to display products.
In the product description there are links to other products (shown on the same page)

When show the first product, everything works ok but when click on description link and redirect to the second product, the links stop working! And when click on them get the page error localhost:8100/productID

I want to keep track of the products! Any ideia to resolve this?

@product-page.ts

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { Http } from '@angular/http';

@Component({
  selector: 'product-page',
  templateUrl: 'product-page.html'
})

export class ProductPage {

  url: string;
  productContent: any;

  constructor(public navCtrl: NavController, public navParams: NavParams, public http: Http) {
    this.currentProduct = navParams.get('productID');

    this.url =  'http://www.example.com?product=' + this.currentProduct;

    this.loadProductInfo();
  }


  loadProductInfo()
  {
    var that = this;
    //Call service to obtain content to display

    this.http.get(this.url).subscribe(
        data => {
          that.productContent = JSON.parse(data.text());

          //Change events
          setTimeout(function()
          {
            that.transformAnchors();

          },1);
        },
        err => {
            console.error(err);
        }
    );

  }

  transformAnchors()
  {
    var that = this;
    
    //Catch all links inside display content
    let anchors = document.getElementById('contentArea') ? document.getElementById('contentArea').getElementsByTagName("a") : null;

    if(anchors != null)
    {
      //Through the links and listen click to redirect this current page with other product ID  
      Array.prototype.forEach.call(anchors, function (link) {

          link.onclick = function (event) {

            event.stopPropagation();

            //Navigate to current page with other product ID and maintain history
            that.navCtrl.push(ProductPage,{
              productID: encodeURIComponent(event.target.getAttribute('productID'))
            }).then(() => {
              that.transformAnchors();
            });

            return false;
          }
        });
      }
  }

}

@product-page.html


<ion-header>

  <ion-row *ngIf="productContent && productContent.title">
    <ion-col>
      <ion-title *ngIf="productContent">{{productContent.title}}</ion-title>
    </ion-col>
  </ion-row>
  </ion-row>

</ion-header>

<ion-content padding>

  <ion-card *ngIf="productContent && productContent.information" id="contentArea" [innerHTML]="productContent.information"></ion-card>


</ion-content>


#2

There is my solution :slight_smile: for this problem. Change only transformAnchors function

transformAnchors()
  {
    var that = this;
    //Get last definition area content
    let contentAreas = document.getElementsByClassName('contentArea'); //Change get by id to class and return array of elements 
    let anchors = contentAreas.length > 0 ? contentAreas[contentAreas.length-1].getElementsByTagName("a") : null;

    if(anchors != null)  {
          Array.prototype.forEach.call(anchors, function (link) {

          link.onclick = function (event) {
            event.stopPropagation();

            that.navCtrl.push(ProductPage,{
              searchQuery: encodeURIComponent(event.target.getAttribute('productID'))
            },{animate: false}).then(() => {
              that.transformAnchors();
            });

            return false;
          }
        });
      }