Получать данные только от выбранного элемента на другой странице

Я бы хотел, чтобы при нажатии на любой элемент в моем списке отображались только данные этого элемента на новой странице. Я уже могу отображать элементы со страницы 1 по страницу 2, но не могу фильтровать. Может ли кто-нибудь помочь мне с этим?

HTML p1

  <ion-segment-button value = "Todosgastronomia" class = "todos-button" 
   (click) = "selecionaprodutoscategoria(1)">
   Todos
  </ion-segment-button>


    <ion-list *ngSwitchCase = "'Todosgastronomia'">
    <ion-item no-lines *ngFor = "let produto of 
    produtos(click) = "querocomprar()" no-padding>
    <ion-thumbnail item-start>
    <img src = "assets/imgs/mmsszjm.png" class = "imgast">
    </ion-thumbnail>
    <ion-row class = "rowclass">
    <h3 class = "nomproduto"> {{produto.nom_produto}} </h3>
    <h3 class = "nomsubcategoria">{{produto.nom_subcategoria}} </h3>
    <h3 class = "descproduto"> {{produto.desc_produto}} </h3>
    <h3 class = "descdesconto"> {{produto.desc_desconto}}</h3>
    <h3 class = "valproduto">
    <font color = "#179c90">R$</font> {{produto.val_produto}}
    </h3>
    <button ion-button small end class = "favproduto">
    <ion-icon name = "icon-ico_favoritos"></ion-icon>
    </button>
    <button ion-button class = "querotodos">QUERO! 
    </button>
    </ion-row>
    </ion-item>
    </ion-list>

ТС п1

 export class HomePage implements OnInit {
 videoOptions: VideoOptions;
 videoUrl: string;
 public regioes: Regiao[];
 produtos: Produto[];

 querocomprar(produto: number) {
this.navCtrl.push(ConteudoprodutoPage, {
  val: this.produtos
})

}

ТС p2

export class ConteudoprodutoPage {

produto: Produto;

constructor(private payPal: PayPal, public navCtrl: NavController, public 
navParams: NavParams) {
this.produto = navParams.get("valor");
}