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错误错误：未被捕获（承诺）：无效链接：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

以防延迟加载：

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 2

您的联系人页面应包含模块。是使用ionic page generate命令创建的吗？
参考链接： https://ionicframework.com/docs/cli/generate/

您可以使用两种方式推送页面进行导航。
1）导入页面中的页面不包含模块。然后像这样导航：

from cx_Freeze import setup, Executable
import sys


#main
exe = Executable(script="test.py", base="Win32GUI")
buildOptions = dict(excludes = ["tkinter"], includes =["idna.idnadata"], optimize=1)
setup(name = "instagram",version = "1.0", description = "test", executables = [exe], options = dict(build_exe = buildOptions))

2）如果页面上有模块，请按以下方式导航：

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

Answer 3

您的HTML

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

像这样修改您的打字稿

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

如何在Ionic中将表单从一页路由到另一页

3 个答案: