Как перенаправить одну страницу на другую в Ionic

Question

Здесь я разрабатываю переход с одной страницы на другую в IONIC. Так что я разработал ниже код

<div *ngFor="let list of product">
  <img [src] ='list.imge'/>
  <button ion-button round (click)="Contact()">view</button>
</div>

и typescript - это

export class HomePage {
 product:any[]=[{id:121,name:"iphone",imge:'assets/img/iphone.png'}]
  constructor(public navCtrl: NavController) {
  }
  Contact() {
    this.navCtrl.push('ContactPage');
  }
}

core.js: 1449 ОШИБКА Ошибка: Uncaught (в обещании): недействительная ссылка: ContactPage на c (polyfills.js: 3)

Как только я нажимаю на кнопку просмотра, она не переходит на другую страницу.

Редактировать скрипт типа контактной страницы

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-contact',
  templateUrl: 'contact.html'
})
export class ContactPage {

  constructor(public navCtrl: NavController) {

  }

}

Answer 1

Ваш HTML

<div *ngFor="let list of product">
  <img [src] ='list.imge'/>
  <button ion-button round (click)="Contact()">view</button>
</div>

Измените свой Typescript следующим образом

import { ContactPage} from '../../pages/contact/contact';
.......

    export class HomePage {
     product:any[]=[{id:121,name:"iphone",imge:'assets/img/iphone.png'}]
      constructor(public navCtrl: NavController) {
      }

      Contact() {
        this.navCtrl.push(ContactPage);
        OR
        this.navCtrl.setRoot(ContactPage);//(if you want block backbutton)
      }
    }

Answer 2

на случай, если он загружен лениво:

import { NavController } from 'ionic-angular';
// IMPORT ContactPage IF NOT LAZY-LOADED
import { ContactPage} from path;

export class HomePage {
    constructor(private navCtrl:NavController){}

    // IF LAZY-LOADED
    Contact(){
        this.navCtrl.push('ContactPage');
    }

    // IF NOT LAZY-LOADED
    Contact(){
        this.navCtrl.push(ContactPage);
    }
}

Answer 3

Ваш ContactPage должен содержать модуль. Это создано с помощью команды ионной генерации страницы?
Ссылка ссылка: https://ionicframework.com/docs/cli/generate/

Вы можете нажать на страницу для навигации двумя способами.
1) Страница импорта на странице не содержит модуля. И перемещаться как:

import { ContactPage } from path;
this.navCtrl.push(ContactPage);

2) Если на странице есть модуль, перемещайтесь как:

this.navCtrl.push('ContactPage');