Ionic Angular BMI应用：点击按钮跳转计算结果页实现问题

问题说明 #

基于最新版Ionic Angular开发BMI应用，已实现输入合法性校验、页面跳转及参数传递功能，当前需完成结果页（AusgabePage）的BMI计算与结果展示。应用流程：点击按钮获取体重（Gewicht）、身高（Körpergröße）数据→校验合法性→跳转至结果页→代入BMI公式计算并展示结果。

现有代码 #

输入页HTML #

<ion-item>
  <ion-label>Gewicht</ion-label>
  <ion-input clearInput type="number" placeholder="kg" [(ngModel)]="eingabeKG" min="1" onkeypress="return (event.charCode !=8 && event.charCode ==1 || (event.charCode >= 48 && event.charCode <= 57))"></ion-input>
</ion-item>

<ion-item>
  <ion-label>Körpergröße</ion-label>
  <ion-input clearInput type="number" placeholder="cm" [(ngModel)]="eingabeCM" min="1" onkeypress="return (event.charCode !=8 && event.charCode ==1 || (event.charCode >= 48 && event.charCode <= 57))"></ion-input>

</ion-item>
<ion-button expand="block" (click)="onBerechnenButton()">Umrechnen</ion-button>
</ion-content>

HomePage.ts #

export class HomePage {

public eingabeKG = null;
public eingabeCM = null;

  constructor( private alertCtrl: AlertController,
    private navCtrl  : NavController) {
    
    }
async onBerechnenButton() {
if (this.eingabeKG == null && this.eingabeCM == null) {

  this.zeigeFehlerDialog("Bitte Gewicht und Körpergröße eingeben!");
  return;
  } else
  this.navCtrl.navigateForward(['/ausgabe']);

let navigationTarget = `/ausgabe?eingabeKG=${this.eingabeKG}&eingabeCM=${this.eingabeCM}`;
  this.navCtrl.navigateForward(navigationTarget);

async zeigeFehlerDialog(nachricht: string) {

  const meinAlert =
        await this.alertCtrl.create({ header  : "Fehler",
                                      message : nachricht,
                                      buttons : [ "Ok" ]
                                    });
  await meinAlert.present();
}
}

AusgabePage.ts #

export class AusgabePage {

public eingabeKG: string;
public eingabeCM: string;

  constructor(private activatedRoute: ActivatedRoute) { 

  this.eingabeKG = activatedRoute.snapshot.queryParamMap.get( "eingabeKG" )!;
  this.eingabeCM = activatedRoute.snapshot.queryParamMap.get( "eingabeCM" )!;
  }
}

结果页HTML #

<ion-content>
  <ion-text>
<p>
  {{eingabeKG}} {{eingabeCM}}
</p>
    
  </ion-text>
</ion-content>

解决方案 #

1. 修复HomePage.ts的跳转与校验逻辑 #

原代码存在重复跳转调用，且校验逻辑不完整，修改后代码如下：

export class HomePage {
  public eingabeKG: number | null = null;
  public eingabeCM: number | null = null;

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

  async onBerechnenButton() {
    // 完善校验：任意参数为空都提示
    if (!this.eingabeKG || !this.eingabeCM) {
      this.zeigeFehlerDialog("Bitte Gewicht und Körpergröße eingeben!");
      return;
    }
    // 仅保留一次跳转，传递参数
    const navigationTarget = `/ausgabe?eingabeKG=${this.eingabeKG}&eingabeCM=${this.eingabeCM}`;
    this.navCtrl.navigateForward(navigationTarget);
  }

  async zeigeFehlerDialog(nachricht: string) {
    const meinAlert = await this.alertCtrl.create({
      header: "Fehler",
      message: nachricht,
      buttons: ["Ok"],
    });
    await meinAlert.present();
  }
}

2. 在AusgabePage.ts中实现BMI计算 #

将字符串参数转为数字，计算BMI值并添加分类判断：

import { ActivatedRoute } from '@angular/router';
import { Component } from '@angular/core';

@Component({
  selector: 'app-ausgabe',
  templateUrl: './ausgabe.page.html',
  styleUrls: ['./ausgabe.page.scss'],
})
export class AusgabePage {
  public eingabeKG: number;
  public eingabeCM: number;
  public bmiWert: number | null = null;
  public bmiKategorie: string = '';

  constructor(private activatedRoute: ActivatedRoute) {
    // 将字符串参数转为数字
    this.eingabeKG = Number(activatedRoute.snapshot.queryParamMap.get("eingabeKG"));
    this.eingabeCM = Number(activatedRoute.snapshot.queryParamMap.get("eingabeCM"));
    // 计算BMI
    this.berechneBMI();
  }

  private berechneBMI(): void {
    if (this.eingabeKG && this.eingabeCM) {
      // 身高转米：cm / 100
      const groesseInM = this.eingabeCM / 100;
      // BMI公式：体重(kg) / (身高(m))²，保留两位小数
      this.bmiWert = Number((this.eingabeKG / (groesseInM * groesseInM)).toFixed(2));
      // 判断BMI分类
      this.bestimmeBMIKategorie();
    }
  }

  private bestimmeBMIKategorie(): void {
    if (!this.bmiWert) return;
    if (this.bmiWert < 18.5) {
      this.bmiKategorie = "Untergewicht";
    } else if (this.bmiWert >= 18.5 && this.bmiWert < 25) {
      this.bmiKategorie = "Normalgewicht";
    } else if (this.bmiWert >= 25 && this.bmiWert < 30) {
      this.bmiKategorie = "Übergewicht";
    } else {
      this.bmiKategorie = "Adipositas";
    }
  }
}

3. 结果页HTML展示BMI结果与分类 #

修改结果页HTML，展示完整的BMI信息：

<ion-content class="ion-padding">
  <ion-text>
    <h2>Ihr BMI-Ergebnis</h2>
    <p>Gewicht: {{eingabeKG}} kg</p>
    <p>Körpergröße: {{eingabeCM}} cm</p>
    <p class="bmi-wert">BMI: {{bmiWert}}</p>
    <p class="bmi-kategorie">Kategorie: {{bmiKategorie}}</p>
  </ion-text>
</ion-content>

可选：添加样式优化展示效果（ausgabe.page.scss）

.bmi-wert {
  font-size: 1.5rem;
  font-weight: bold;
  margin: 1rem 0;
}

.bmi-kategorie {
  font-size: 1.2rem;
  color: #2c3e50;
}

内容的提问来源于stack exchange，提问作者Ksunit