Question

我的第一个离子2应用程序的问题只是做了离子的官方博客教程，这对我来说不合适，这是我的家。

import {Page} from 'ionic-angular';
import {AboutPage} from '../about/about';

@Page({
  templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
  aboutPage = AboutPage;

  constructor() {
  this.name = "Bartek";
  }
}

这是我的home.html，这应该只是导航到下一页：

<ion-navbar *navbar>


<ion-title>
    Hello World
  </ion-title>
</ion-navbar>

<ion-content class="home">
  <ion-card>
    <ion-card-header>
      Card Header
    </ion-card-header>
    <ion-card-content>
      Hello
      <button [navPush]="aboutPage">Go To About</button>
    </ion-card-content>
  </ion-card>
</ion-content>

但是当我在CLI中运行“ionic-serve”时，这给了我一个错误

ionic $ TypeScript error: 

/home/bartomiej/Programowanie/Nauka/Ionic/helloWordl/app/pages/home/home.ts(2,25): Error TS2307: Cannot find module '../about/about'.
TypeScript error: /home/bartomiej/Programowanie/Nauka/Ionic/helloWordl/app/pages/home/home.ts(11,8): Error TS2339: Property 'name' does not exist on type 'HomePage'.
[20:41:16] Starting 'html'...
[20:41:17] Finished 'html' after 770 ms

/home/bartomiej/Programowanie/Nauka/Ionic/helloWordl/app/pages/about/about.js:1
import {Page, NavController} from 'ionic-angular';
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'
HTML changed: www/build/pages/about/about.html
HTML changed: www/build/pages/home/home.html

任何人都知道有什么问题我只是按照官方博客的说明进行操作：）

Answer 1

在类中创建一个函数，它将执行导航并调用按钮上的函数，而不是使用[navPush]。您还需要在构造函数中注入NavController。例如：

constructor(private nav: NavController){
}

navigateAbout(){
  this.nav.push(AboutPage);
}

比在html中做<button (click)="navigateAbout"></button> 我认为这是更好的方法，而且你会看到类中的整个逻辑，而不是在html

中

如果你仍想做你的方法，尝试在构造函数中注入NavController，也许它会有所帮助

Answer 2

您的变量位于全局空间中。使用＆＃34;让＆＃34;块范围的关键字。或者放置你的＆＃34; aboutPage＆＃34;构造函数体中的变量如下：this.aboutPage。

Answer 3

我认为这是因为您需要在构造函数中调用NavController。这应该可以解决问题。

import {Page} from 'ionic-angular';
import {AboutPage} from '../about/about';

@Page({
  templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
  aboutPage = AboutPage;

  constructor(public navCtrl: NavController) {
    this.navCtrl;
    this.name = "Bartek";
  }
}

Ionic 2导航页面不起作用

3 个答案: