Ionic5：无法使用 Extra State 方法检索在 url 中传递的数据

Question

我查找了很多帖子以找到解决方案，但似乎没有解决方案适合我...... 我正在尝试使用“Extra State”方法通过 url 传递数据，但收到错误消息，指出它无法读取属性（可能是因为检索函数不起作用，因此未定义变量）。

发送数据的页面（practice-amount.page.ts）：

    import { Router, NavigationExtras } from '@angular/router';
    import { Component, OnInit } from '@angular/core';
    
    @Component({
      selector: 'app-practice-amount',
      templateUrl: './practice-amount.page.html',
      styleUrls: ['./practice-amount.page.scss'],
    })
    export class PracticeAmountPage implements OnInit {
    
      constructor(private router: Router) { }
    
      goToQuizz(amount: number){
        let navigationExtras: NavigationExtras = {
          state: {
            amountUrl: 50,
          }
        };
        this.router.navigate(['tabs/practicetab/practice-amount/quizzalpha', navigationExtras]);
      }
    
      ngOnInit() {
      }
    
    }

检索数据的页面（quizzalpha.page.ts）：

    import { Component, OnInit } from '@angular/core';
    import { ActivatedRoute, Router } from '@angular/router';
    
    @Component({
      selector: 'app-quizzalpha',
      templateUrl: './quizzalpha.page.html',
      styleUrls: ['./quizzalpha.page.scss'],
    })
    export class QuizzalphaPage implements OnInit {
    
      amount: number;
    
      constructor(private route: ActivatedRoute, private router: Router) {
       
        this.route.queryParams.subscribe(params => {
          // if (this.router.getCurrentNavigation().extras.state) {
            this.amount = this.router.getCurrentNavigation().extras.state.amountUrl;
          // }
        });
    
       }
    
      
    
      ngOnInit() {
        
        console.log(this.amount);
    }
    
    }

我禁用了 IF 以查看错误： Debug message

我开始认为这个错误可能是由于一个奇怪的路由，因为在所有在线示例中，它们总是有简单的路径，而我的却充满了嵌套页面......

Answer 1

您将navigationExtras 作为网址的一部分传递，请尝试以下操作：

        this.router.navigate(['tabs/practicetab/practice-amount/quizzalpha'],navigationExtras);