如何在Ionic-Angular中将评估结果传递到另一页面并在界面展示

步骤1：修改评估页（EvaluationPage）逻辑，携带参数跳转 #

修改你的evaluation.page.ts里的getQuestionResults方法，将计算得到的结果通过路由参数传递到结果页：

getQuestionResults(){
    let sumA = 0;
    let resultText = '';
    for (const q of this.questions) {
        sumA += Number(q.answer || 0);
    }

    if (sumA<=39) {
        resultText = "无抑郁迹象"
    }
    else if(sumA>=40 && sumA<=59) {
        resultText = "轻度抑郁迹象"
    }
    else if(sumA>=60 && sumA<=79) {
        resultText = "中度抑郁迹象"
    }
    else if(sumA>=80 && sumA<=100) {
        resultText = "重度抑郁迹象"
    }
    else {
        alert("参数错误！")
        return;
    }
    // 跳转时携带参数
    this.route.navigate(['/result'], {
        queryParams: {
            score: sumA,
            result: resultText
        }
    });
}

步骤2：在结果页接收路由参数 #

打开结果页对应的result.page.ts文件，注入ActivatedRoute获取传递过来的参数：

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

@Component({
  selector: 'app-result',
  templateUrl: './result.page.html',
  styleUrls: ['./result.page.scss'],
})
export class ResultPage implements OnInit {
  // 定义变量存储接收的参数
  totalScore: number = 0;
  depressionResult: string = '';

  constructor(private activatedRoute: ActivatedRoute) { }

  ngOnInit() {
    // 接收参数
    this.activatedRoute.queryParams.subscribe(params => {
      if(params) {
        this.totalScore = params['score'];
        this.depressionResult = params['result'];
      }
    })
  }
}

步骤3：在结果页界面展示数据 #

修改result.page.html，直接用插值语法渲染拿到的结果即可：

<ion-header>
  <ion-toolbar>
    <ion-title>评估结果</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <ion-card>
    <ion-card-content text-center>
      <h3>总得分：{{totalScore}}</h3>
      <h2>评估结果：{{depressionResult}}</h2>
    </ion-card-content>
  </ion-card>
</ion-content>

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