Custom Component with data isolated

Ionic Framework ionic-v3
1

Hello!
I’ve created a custom component with a property. I use this component in 2 pages of my app.
When go to a page, I change the property with a value, then when I navigate to the other page, I have this property setted too.
There is something to use It like 2 different instances? Becouse It seems to behave like a Service with a single instance.

Plase I have to fix it.
Thank you.

2

Please post code. Your description is too vague.

3

Hello,

post code seems a good idea. I am completly new to ionic, so this is only a guess.

If your property use a variable, that is declared out side the class both instance of the component use it. if this variable is declared inside the class it should be use only by this instance.

Best regards, anna

4

I am sorry. I was very busy.

This is my component code:

import { Component, Input, Output, EventEmitter} from '@angular/core';
import { ProductService } from '../../providers/product-service';
import { ProductModel } from '../../models/product';
import { ClientModel } from '../../models/client';

/*
  Generated class for the ProductList component.

  See https://angular.io/docs/ts/latest/api/core/index/ComponentMetadata-class.html
  for more info on Angular 2 Components.
*/
@Component({
  selector: 'product-list',
  templateUrl: 'product-list.html'
})
export class ProductListComponent {  
  @Input('client') client:ClientModel;
  @Input('searchTerm') searchTerm:string;
  @Output() productClick = new EventEmitter();

  //Products List
  public products: ProductModel[];  

  constructor(
    public productService: ProductService) {  

  }

  /**
   * Filters product by search term
   */
  setFilteredProducts(filters) {
    this.productService.clearOffset();
    this.productService.filterItems(filters.searchTerm)
      .then(products => {
        this.products = products;
      });
  }


  

  /**
   * Emits the product when it is clicked
   * @param product Product selected
   */
  clickProduct(product:ProductModel) {
    this.productClick.emit(product);
  }

  public ngOnInit(){
    let promise;

    if (this.client != undefined){
      promise = this.productService.getByClient(this.client);
    } else {
      promise = this.productService.getAll();
    }

    promise.then(result => {
      this.products = result;
    })
  }

  doInfinite() {

    this.productService.incrementOffset();
    return this.productService.getAll().then(products => {
      this.products = [...this.products, ...products];
      return true;
    });
  }
}

Look the list, is a local attribute, not a binding variable, so it will be different instances, but the list is filtered with the last searchTerm.

Thank you

5

ngOnInit is too early to rely on client having been bound. The only place you can do that is ngOnChanges.

6

But why they shares the productList collection?

7

Ask your ProductService. If it’s handing out the same array on each call to getAll(), they’re all aliased to one another.

8

Ok, I recently look bug in my code.
I was sharing the search criteria in the service…

My bad!
Thank you