Question

我试图点击按钮导航到另一个页面。

主页有两页以home.html为基础。 <button ion-button click="onclick()"> Go</button>

在home.ts我已导入BasePage模块。

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { BasePage } from '../base/base';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {

  }
onclick(){
  this.navCtrl.push(BasePage)
}
}

在app.module.ts我已导入相同的BasePage

它没有重定向到页面。控制台上没有任何错误。我检查了很多网站。他们使用了正常工作的相同功能。我正在使用angular3。

Answer 1

您的按钮代码看起来不正确click格式不正确，因此无法正确处理。

而不是

<button ion-button click="onclick()"> Go</button>

尝试（点击）

<button ion-button (click)="onclick()"> Go</button>

Answer 2

当您想要在发生某事时触发某个功能时，您必须使用事件。在模板中，事件放在括号中。这就是David Dal在您的代码中修复的内容。

Answer 3

在您的模板文件中，它应该是 -

<button ion-button (click)="onclick()"> Go</button>

在您的组件文件中您错过了分号。终止是任何编程语言的最佳实践。

onclick(){
    this.navCtrl.push(basePage);
}

最后一件事是在app.module.ts文件中导入BasePage

Answer 4

最好定义包含页面引用的类属性。尝试在.ts文件中执行类似的操作。

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { BasePage } from '../base/base';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  basePage: BasePage = BasePage;

  constructor(public navCtrl: NavController) {

  }

  onclick(){
    this.navCtrl.push(this.basePage);
  }
}

通过这种方式，您可以将页面引用到属性中。将该属性用作“导航器”。

顺便尝试在HTML中执行此操作：

<button ion-button (click)="onclick()">Some Button</button>

还要确保将您的BasePage添加到App Module文件，否则它将无效！

希望有所帮助;）

请注意，您可以直接在HTML按钮中使用[navPush]指令，而不是使用函数（如果您想要实现的结果是简单导航）。在这种情况下，只需创建我显示的属性，然后在HTML中创建此＆lt; button ion-button [navPush] =“basePage”＆gt;按钮名称＆lt; /按钮＆GT;它可以在不使用任何功能的情况下工作！

Ionic3 - this.NavCtrl.push（）不起作用

4 个答案: