navCtrl 导航到下一页

Question

我的代码有问题。无法从主页导航到例如关于页面。该应用程序位于离子框架中。这项技术是全新的。在控制台中没有警告和错误。 home.ts

import { Component } from '@angular/core';
import { NavController, IonicPage } from 'ionic-angular';
import { Auth } from '@ionic/cloud-angular';
import { User } from '@ionic/cloud-angular';
import { LoginPage } from '../login/login';
import { About } from '../about/about';
import { ChatPage } from '../chat/chat';

@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  constructor(public navCtrl: NavController,  public auth: Auth, public user: User) {
    console.log(user);
  }

  logout() {
      this.auth.logout();
      this.navCtrl.setRoot(LoginPage);
    }

   about(){
      this.navCtrl.setRoot(About);
    }

    chat(){
      this.navCtrl.setRoot(ChatPage);
    }
}

home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Home
    </ion-title>
    <ion-buttons end>
      <button ion-button icon-only (click)="logout()">
        <ion-icon name="exit"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h2>Welcome back, {{ user.details.name }}</h2>
  <p>
    <button ion-button color="secondary" block>Something</button>
  </p>
  <p>
    <button ion-button color="secondary" block [navPush]="ChatPage">Chat</button>
  </p>
  <p>
    <button ion-button color="secondary" block [navPush]="About">About</button>
  </p>
</ion-content>

关于.ts

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

@IonicPage()
@Component({
  selector: 'page-about',
  templateUrl: 'about.html',
})
export class About {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad About');
  }

}

关于.html

<ion-header>

  <ion-navbar>
    <ion-title>about</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding class="about">
  This is my super awesome about page.
</ion-content>

Answer 1

一种可能且简单的解决方案是单击按钮时调用方法。当您在 home.ts 中定义 about() 方法时，现在在单击按钮时调用此方法。只需更新 home.html 中的代码

<ion-header>
  <ion-navbar>
    <ion-title>
      Home
    </ion-title>
    <ion-buttons end>
      <button ion-button icon-only (click)="logout()">
        <ion-icon name="exit"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h2>Welcome back, {{ user.details.name }}</h2>
  <p>
    <button ion-button color="secondary" block>Something</button>
  </p>
  <p>
    <button ion-button color="secondary" block (click)="chat()">Chat</button>
  </p>
  <p>
    <button ion-button color="secondary" block (click)="about()">About</button>
  </p>
</ion-content>