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

Question

我查阅了很多帖子来寻找解决方案，但似乎没有适合我的解决方案... 我正在尝试使用“额外状态”方法通过 url 传递数据，但得到的错误提示它无法读取属性（可能是因为检索功能不起作用，所以变量未定义）。

页面发送数据（练习-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 作为 url 的一部分试试这个：

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

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

Ionic5 : Can't retrieve data passed in url using the Extra State method

routes

angular

ionic5