Ошибка Ionic Framework 3: проблемы с перенаправлением окна

Question

Я новичок в Ionic Framework, и я использую версию 3 для создания простого приложения, которое перенаправляет пользователя на страницу .html после входа в систему. Я отредактировал файл home.ts , чтобы сделать возможным вход в систему, и я построил тест .html с именем index.html в папке "pages / home" внутри ионного проекта, но я 'я получаю сообщение об ошибке, когда я пытаюсь подключить кнопку "отправить" к этой странице index.html:

код в home.html

  <ion-header>
  <ion-navbar>
    <ion-title>
      Login
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
 <ion-list no-lines>
    <ion-item>
        <ion-label floating>User</ion-label>
        <ion-input type="text" [(ngModel)]="username"></ion-input>
    </ion-item>

    <ion-item>
        <ion-label floating>Senha</ion-label>
        <ion-input type="text" [(ngModel)]="password"></ion-input>
    </ion-item>

    <button block ion-button block (click)="signIn()">Sign in</button>

</ion-list>

</ion-content>

код в home.ts

import { Component } from '@angular/core';
import { NavController, AlertController, IonicPage } from 'ionic-angular';
import { index } from 'c:/Ionic/task-1/src/pages/home/index.html';

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

  public username : any = '';
  public password : any = '';

  constructor(public navCtrl: NavController, public alertCtrl: AlertController) 
{

  }

  signIn() {

        this.navCtrl.push('index.html');
     }
   }  

Код в index.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Login
    </ion-title>
  </ion-navbar>
</ion-header>

 <ion-content padding>
 <p>Testing HTML page redirect</p>

</ion-list>

</ion-content>

Ошибка: https://i.stack.imgur.com/vRivh.png

Что я мог сделать?

Answer 1

В ionic 3 вы можете перемещаться по страницам, используя NavController. Вы должны создать компонент, который вы хотите направить.

Для этого вам нужно импортировать компонент (страницу)

HTML-файл

<button block ion-button block (click)="signIn()">Sign in</button>

TS-файл

import { NavController } from 'ionic-angular';
import { StartPage } from './start-page';

@Component(
  selector: 'app-home',
  templateUrl: 'home.html'
})
class HomePage {

constructor(public navCtrl: NavController){}

signIn() {
     this.navCtrl.push(StartPage);
  }
}

См. NavController документацию по ионному проверьте здесь

Answer 2

В файле home.ts:

import { Component } from '@angular/core';
import { NavController, AlertController, IonicPage } from 'ionic-angular';
import { IndexPage} from '../index/index';

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

  public username : any = '';
  public password : any = '';

  constructor(public navCtrl: NavController, public alertCtrl: AlertController){}

  signIn() {
     this.navCtrl.push(IndexPage);
  }
}